v0.0.2older

Documentation version

Currently searching v0.0.2

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

ComponentsLumos 0.0.1UpdatedOpen component

Eyebrow

The small line of text above a heading.

A short label that sits above a heading and tells the reader what kind of thing they are looking at. Two forms: a marker beside the text, or a filled pill.

astro
<Eyebrow>Default</Eyebrow>
<Eyebrow variant="tag">Tag</Eyebrow>

Props

PropTypeDefaultWhat it does
renderbooleantrueSet to false to skip this component and everything inside it.
variant"default" | "tag""default"default draws a marker beside the text. tag drops the marker and puts the text in a filled pill.
tag"span" | "p" | "h1"–"h6""p"What the text is written as. The type style is fixed whichever you choose, so a label can take a heading level — where it titles the section under it — or span, where it is part of a sentence, without changing how it looks.