Tile

A headline figure with its label and its change. For price pages, market pages and the top of a data story.

When to use it

At the top of a price or market page, where one figure is the answer the reader came for.
In a row of three or four, for figures a reader compares at a glance.

Do not use a row of tiles as a summary of a page that has no figures. Tiles are for numbers.
Do not put more than four in a row. Past that it is a table.

A row of three

Petrol, Lagos ₦1,345 2.4% this week

Dollar to naira 1,512.40 0.8% today

NGX All-Share 98,247 0.3% today

HTML

<div style="display:grid;gap:var(--p234-space-6);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))">
  <div class="p234-tile">
    <span class="p234-tile__label">Petrol, Lagos</span>
    <span class="p234-tile__figure">&#8358;1,345</span>
    <span class="p234-delta" data-direction="up">2.4% this week</span>
  </div>
  <div class="p234-tile">
    <span class="p234-tile__label">Dollar to naira</span>
    <span class="p234-tile__figure">1,512.40</span>
    <span class="p234-delta" data-direction="down">0.8% today</span>
  </div>
  <div class="p234-tile">
    <span class="p234-tile__label">NGX All-Share</span>
    <span class="p234-tile__figure">98,247</span>
    <span class="p234-delta" data-direction="up">0.3% today</span>
  </div>
</div>

Anatomy

A thick rule on top, then the label, then the figure, then the change. The rule is what separates tiles from each other; there is no card, no border and no shadow.

<div class="p234-tile">
  <span class="p234-tile__label">   what it is
  <span class="p234-tile__figure">  the number, tabular
  <span class="p234-delta">         the change, optional
</div>

Figures are tabular

The figure uses data-lg, which sets font-variant-numeric: tabular-nums. In a row of tiles the digits then sit on the same grid, so the eye compares magnitudes instead of re-reading each one.

Say when, and say whose

A number with no date is the specific failure mode of this product. NBS data lags about four months, live reporting does not, and a tile that shows one without saying which is actively misleading. Put the period in the label or directly under the figure.

Dated, and attributed

Petrol, Lagos · NBS official, May 2026 ₦1,077

Petrol, Lagos · reported, this week ₦1,345 25% above official

HTML

<div style="display:grid;gap:var(--p234-space-6);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))">
  <div class="p234-tile">
    <span class="p234-tile__label">Petrol, Lagos &middot; NBS official, May 2026</span>
    <span class="p234-tile__figure">&#8358;1,077</span>
  </div>
  <div class="p234-tile">
    <span class="p234-tile__label">Petrol, Lagos &middot; reported, this week</span>
    <span class="p234-tile__figure">&#8358;1,345</span>
    <span class="p234-delta" data-direction="up">25% above official</span>
  </div>
</div>

Tokens this component reads

--p234-color-ink--p234-color-ink-muted--p234-type-meta-*--p234-type-data-lg-*--p234-space-2--p234-space-4--p234-border-thick