Meta

When to use it

• Under a headline, to say where the story came from and when.
• Name the original outlet. Ninety-eight per cent of the archive summarises someone else's reporting, and saying so is both honest and the reason a reader trusts the next summary.

• Do not put the section here. That is the kicker, above the headline.
• Do not let it outweigh the headline. Everything but the source name stays muted.

<div class="p234-meta">
  <span class="p234-meta__source">Channels Television</span>
  <span class="p234-meta__dot">&middot;</span>
  <span>2 hours ago</span>
  <span class="p234-coverage">6 sources</span>
</div>

<div class="p234-meta">
  <span>NGX filing</span>
  <span class="p234-meta__dot">&middot;</span>
  <span>1 hour ago</span>
</div>

Structure

It is a flex row that wraps, so a long outlet name on a narrow phone drops the timestamp to a second line rather than truncating it. The separator is a real element, not a CSS border, so it disappears cleanly when the row wraps.

Timestamps

• Relative inside 24 hours, then the date. "2 hours ago" is useful; "14 days ago" is not.
• Put the machine-readable value in a <time datetime> attribute.