Eyebrow

Examples

The eyebrow renders live from tokens.css via the .kicker class. Place it immediately above the heading it introduces.

<p class="kicker">Why Convert</p>
<h2>The experimentation platform for teams that ship</h2>

Usage

The eyebrow sets context for a section, so keep it tight and always tied to a heading.

• Use one eyebrow per section, placed directly above the H2 it introduces.
• Keep it to 1-3 words, it is a label, not a sentence.
• It is always uppercase violet-700; never restyle the color or case.
• Never use it as a standalone label far from a heading, without a heading beneath it, it has no context to set.

States

The eyebrow is static: it has no hover, active, or disabled states. It only labels the section beneath it, so there is no interaction to give feedback for.

Code

The .kicker class ships in tokens.css, no extra stylesheet needed. Pair it with the heading it introduces.

<p class="kicker">Why Convert</p>
<h2>The experimentation platform for teams that ship</h2>