+234 Design System

Coverage

How many outlets are carrying a story. The one thing an aggregator can say that no single publisher can, so it is a first-class part of the card.

Why this is a component at all

Ninety-eight per cent of the archive is short summaries of other publishers' reporting. Built as a news site, that is a weakness. Built as an intelligence platform, the breadth is the product: how many independent outlets are carrying this, and how hard is it being covered.

The ranking pipeline already computes the number. Surfacing it turns a liability into the thing nobody else on the page can offer.

On its own

6 sources 12 sources 1 source
HTML
<span class="p234-coverage">6 sources</span>
<span class="p234-coverage">12 sources</span>
<span class="p234-coverage">1 source</span>

Where it goes

Inside the meta row, at the end. It is a qualifier on the story, not a label above it.

In a card

HTML
<a class="p234-story p234-story--secondary" href="#">
  <span class="p234-kicker" data-section="world">World</span>
  <h3 class="p234-story__headline">Canada releases list of 36 countries whose citizens can apply</h3>
  <p class="p234-story__standfirst">The list sets out which passports qualify for the youth mobility pool next year.</p>
  <div class="p234-meta">
    <span class="p234-meta__source">IRCC</span>
    <span class="p234-meta__dot">&middot;</span>
    <span>yesterday</span>
    <span class="p234-coverage">12 sources</span>
  </div>
</a>

Rules

Tokens this component reads

--p234-color-brand--p234-type-ui-sm-*--p234-radius-pill--p234-border-hairline--p234-space-3