LumoCSS logoLumoCSS logo
Content

Badge

Badges are notes used to highlight small pieces of information, like counts or statuses. Add visual priority with classes.

Inherited into paragraph

Messages123

<p>Messages<span role="note" class="style-primary">123</span></p>

Secondary styling

Result row count5

<p>Result row count<span role="note" class="style-secondary">5</span></p>

Badge in heading

Lorem ipsum3

<h1>Lorem ipsum<span role="note" class="style-secondary">3</span></h1>