brand

Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

Badge

Contextual variations

Add any preset modifier classes to change the appearance of a badge. Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark indigo pink purple
Class Values
class="badge badge-[value]" primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke
Pill badges

Use the .badge-pill modifier class to make badges more rounded.

Primary Secondary Success Danger Warning Info Light Dark
Outline badges

Use the .badge-outline modifier class to create outline badges.

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark
Soft badges
Martian only

Create soft badges using .badge-soft-* modifier class.

Primary Secondary Success Danger Warning Info Primary Secondary Success Danger Warning Info
Badge indicator

Add .badge-indicator to display badge as an indicator.

Priority
Overdue
Upcoming
Completed
Working
Not Started
Hold
Canceled
Badges with headings

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

h1. Martian heading New


h2. Martian heading New


h3. Martian heading New


h4. Martian heading New


h5. Martian heading New

h6. Martian heading New
Button badges

Badges can be used as part of links or buttons to provide a counter.