Pelican Design System Data Tile

Data Tile

Data Tiles group related information about a category.

On this page:

Best Practices

Data Tiles extend Cards behavior and styles.
Data Tiles simply display a label and related data corresponding to that label.
They are useful in clearly displaying lots of text into easy-to-scan holders.
They will be grey when inside a Content Container.
They will be white when not inside a Content Container.

Usage

Label

Value

<div class="data-tile">
  <div class="data-tile-body">
    <p class="fw-bold text-black">Label</p>
    <hr class="minor">
    <p>Value</p>
  </div>
</div>

Page Top