Badges

Category pills, status badges, and inline code chips.

Category pills · blog

thought-leadershipdev-sessioncase-studytalk

Status

OperationalDegradedOutageIn review

Inline code

Set --lp-radius-md on CTA buttons and--lp-radius-lg on cards. Article body inheritsvar(--lp-font-body).

HTML

<span class="lp-pill lp-pill--signal">thought-leadership</span>
<span class="lp-pill lp-pill--blog">dev-session</span>
<span class="lp-pill lp-pill--teal">case-study</span>
<span class="lp-pill lp-pill--purple">talk</span>

<span class="lp-status lp-status--ok">Operational</span>
<span class="lp-status lp-status--warn">Degraded</span>
<span class="lp-status lp-status--err">Outage</span>
<span class="lp-status lp-status--info">In review</span>

<code class="lp-t-code">--lp-radius-md</code>

<!-- Styles: .lp-pill / .lp-status in src/styles/components.css;
     .lp-t-code in src/styles/global.css -->