Basic table
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
- DEFAULT
- PRIMARY
- SUCCESS
- INFO
- WARNING
- DANGER
<span class="label bg-accent">DEFAULT</span>
<span class="label bg-primary">PRIMARY</span>
<span class="label bg-success">SUCCESS</span>
<span class="label bg-info">INFO</span>
<span class="label bg-warning">WARNING</span>
<span class="label bg-danger">DANGER</span>
Headings Label
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
h1. Heading 1 New
h2. Heading 2 New
h3. Heading 3 New
h4. Heading 4 New
h5. Heading 5 New
h6. Heading 6 New
<h1>h1. Heading 1 <span class="label bg-accent">New</span></h1>
<h2>h2. Heading 2 <span class="label bg-accent">New</span></h2>
<h3>h3. Heading 3 <span class="label bg-accent">New</span></h3>
<h4>h4. Heading 4 <span class="label bg-accent">New</span></h4>
<h5>h5. Heading 5 <span class="label bg-accent">New</span></h5>
<h6>h6. Heading 6 <span class="label bg-accent">New</span></h6>
Basic Badge
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<a href="#" class="color-accent">Default <span class="badge bg-accent">12</span></a>
<a href="#" class="color-primary">Primary <span class="badge bg-primary">8</span></a>
<a href="#" class="color-success">Success <span class="badge bg-success">12</span></a>
<a href="#" class="color-info">Info <span class="badge bg-info">8</span></a>
<a href="#" class="color-warning">Warning <span class="badge bg-warning">12</span></a>
<a href="#" class="color-danger">Danger <span class="badge bg-danger">8</span></a>
Flat Badge
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<a href="#" class="color-accent">Default <span class="badge-o">12</span></a>
<a href="#" class="color-primary">Primary <span class="badge-o">8</span></a>
<a href="#" class="color-success">Success <span class="badge-o">12</span></a>
<a href="#" class="color-info">Info <span class="badge-o">8</span></a>
<a href="#" class="color-warning">Warning <span class="badge-o">12</span></a>
<a href="#" class="color-danger">Danger <span class="badge-o">8</span></a>
Button Example
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
<a href="#" class="dg-btn-1 btn-accent size-xl radius-3px">Default <span class="badge-white color-accent">12</span></a>
<a href="#" class="dg-btn-1 btn-primary size-xl radius-3px">Primary <span class="badge-white color-primary">8</span></a>
<a href="#" class="dg-btn-1 btn-success size-xl radius-3px">Success <span class="badge-white color-success">12</span></a>
<a href="#" class="dg-btn-1 btn-info size-xl radius-3px">Info <span class="badge-white color-info">8</span></a>
<a href="#" class="dg-btn-1 btn-warning size-xl radius-3px">Warning <span class="badge-white color-warning">12</span></a>
<a href="#" class="dg-btn-1 btn-danger size-xl radius-3px">Danger <span class="badge-white color-danger">8</span></a>