Strip

A sideways row of cards. Twenty-two files build their own scrolling container today.

Originals strip

Analysis

HTML

<div class="p234-strip">
  <div class="p234-strip__track">
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="markets">Analysis</span>
      <h3 class="p234-strip__title">The four month gap between official and real petrol prices</h3>
      <div class="p234-meta"><span>Plus234Feed</span></div>
    </a>
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="politics">Explainer</span>
      <h3 class="p234-strip__title">What the 2027 appropriation bill actually changes</h3>
      <div class="p234-meta"><span>Plus234Feed</span></div>
    </a>
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="world">Guide</span>
      <h3 class="p234-strip__title">Work permit routes open to Nigerian applicants</h3>
      <div class="p234-meta"><span>Plus234Feed</span></div>
    </a>
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="business">Filing</span>
      <h3 class="p234-strip__title">Nine month results, every listed bank</h3>
      <div class="p234-meta"><span>NGX</span></div>
    </a>
  </div>
</div>

When to use it

For a set that is genuinely browsable and secondary: originals, guides, related tools.
Six to ten items. Fewer and it should be a stacked list; more and it should be its own page.

Do not put the lead story in one. Anything that matters goes in the vertical flow where it will be read.
Do not use a carousel with arrows and autoplay. This scrolls, and that is all it does.
Do not nest a strip inside a strip.

Showing that it scrolls

The scrollbar is hidden, so two things tell the reader there is more: the right edge fades out, and the last visible card is deliberately cut off. A row where the final card ends exactly at the edge looks like the whole set.

Accessibility

Give the track tabindex="0" and a label, so a keyboard can scroll it.
Keep every card reachable by Tab in order. Nothing is hidden from focus just because it is off screen.

Tokens this component reads

--p234-color-ink--p234-color-paper--p234-type-headline-xs-*--p234-space-3--p234-space-5--p234-space-8--p234-border-thick