Link grid

Destinations: categories, states, tools. Text with a rule, not icons in boxes.

Explore categories

HTML

<ul class="p234-linkgrid">
  <li><a href="#">Politics <span class="p234-linkgrid__count">420 stories</span></a></li>
  <li><a href="#">Business <span class="p234-linkgrid__count">388 stories</span></a></li>
  <li><a href="#">Markets <span class="p234-linkgrid__count">210 stories</span></a></li>
  <li><a href="#">World <span class="p234-linkgrid__count">176 stories</span></a></li>
  <li><a href="#">Sport <span class="p234-linkgrid__count">151 stories</span></a></li>
  <li><a href="#">Entertainment <span class="p234-linkgrid__count">98 stories</span></a></li>
</ul>

Tools, where the second line says what the thing does

HTML

<ul class="p234-linkgrid">
  <li><a href="#">Dollar to naira <span class="p234-linkgrid__count">Live rate</span></a></li>
  <li><a href="#">FX calculator <span class="p234-linkgrid__count">Convert any amount</span></a></li>
  <li><a href="#">Naira value <span class="p234-linkgrid__count">What it was worth</span></a></li>
  <li><a href="#">Petrol price <span class="p234-linkgrid__count">By state</span></a></li>
</ul>

Text, not icon tiles

A grid of coloured icon boxes is the fastest way to make a news site look like an app launcher. A rule, a word and a count does the same job, loads nothing, and tells the reader something an icon cannot: how much is behind the link.

Rules

Give every link a second line: a count, or what the thing does.
Keep counts honest and current. A category showing 420 stories that opens on twelve is worse than no count.
Use it in the footer region of a page or a section front, not above the content.

Do not use it as the main navigation. That is the masthead.
Do not add an icon per item.

Tokens this component reads

--p234-color-ink--p234-color-ink-muted--p234-color-brand--p234-type-ui-*--p234-type-meta-*--p234-space-3--p234-space-4--p234-border-thick