###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### 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

dashgrin 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. dashgrin heading New

## h2. dashgrin heading New

### h3. dashgrin heading New

#### h4. dashgrin heading New

##### h5. dashgrin heading New

###### h6. dashgrin heading New

##### Button badges

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