Kicker

When to use it

• Above a headline, to say which part of the site a story belongs to.
• As a small section heading above a rail or a list.

• Never as a filled badge. Section colours are text and rules only.
• Not more than one per card. Two labels is a taxonomy problem, not a design one.

Sections

Five colours, set with data-section. With no attribute the kicker is brand green, which is the right default for anything that is not one of the five.

<p><span class="p234-kicker" data-section="politics">Politics</span></p>
<p><span class="p234-kicker" data-section="business">Business</span></p>
<p><span class="p234-kicker" data-section="markets">Market intelligence</span></p>
<p><span class="p234-kicker" data-section="world">World</span></p>
<p><span class="p234-kicker" data-section="sport">Sport</span></p>
<p><span class="p234-kicker">Plus234Feed original</span></p>

Why they are never backgrounds

A front page carries stories from five sections at once. Five filled colour blocks on one screen is the single fastest way to make a news site look like an admin dashboard, and it drags the eye to the label instead of the headline. As text, the colour does its job quietly: it tells you the section while the headline stays the thing you read.

Every section colour is checked against both paper and paper-alt at 4.5:1, because kickers appear on the newsprint band as well as the page.

<a class="p234-story" href="#">
  <span class="p234-kicker" data-section="markets">Market intelligence</span>
  <h3 class="p234-story__headline">NGX closes higher as banking stocks lead the rally</h3>
  <div class="p234-meta"><span class="p234-meta__source">NGX</span><span class="p234-meta__dot">&middot;</span><span>today</span></div>
</a>

Adding a section

Add the colour to tokens/core.tokens.json and its dark value, add a contrast pair for paper and paper-alt, then one selector in components.css. The build will refuse the colour if it cannot be read in either theme.