Badge

Overview

Hello New

<h1 class="env-text-heading-01">Hello <span class="env-badge">New</span></h1>
<h2 class="env-text-heading-02">Hello <span class="env-badge">New</span></h2>

Variants

Primary Success Warning Danger Info

<span class="env-badge">Primary</span>
<span class="env-badge env-badge--success">Success</span>
<span class="env-badge env-badge--warning">Warning</span>
<span class="env-badge env-badge--danger">Danger</span>
<span class="env-badge env-badge--info">Info</span>

Status variants

Neutral Active Attention

<span class="env-badge env-badge--neutral">Neutral</span>
<span class="env-badge env-badge--active">Active</span>
<span class="env-badge env-badge--attention">Attention</span>

Brand

Brand color badges are available by using modifier env-badge--brand or env-badge--brand-{n}.

Valid values for {n} are: 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80 , 85, 90, 95, 100.

Brand Brand 05 Brand 10 Brand 15 Brand 20 Brand 25 Brand 30 Brand 35 Brand 40 Brand 45 Brand 50 Brand 55 Brand 60 Brand 65 Brand 70 Brand 75 Brand 80 Brand 85 Brand 90 Brand 95 Brand 100

Status badge

Indicates active/inactive status. May be used on text elements and also in combination with profile image.

Last logged in 5 h

Logged in

<p class="env-status-badge">Last logged in 5 h</p>
<p class="env-status-badge env-status-badge--active">Logged in</p>