Shards Dashboard Pro

The following elements are modified or new in Shards Dashboards. All elements from the base Shards framework are also available inside Shards Dashboards. Please make sure you check out Shards’ documentation for more details.

Buttons

The white button is adjusted for a more generic use-case and supports an active state modifier for all the colors provided in Shards Dashboards.

<button type="button" class="btn btn-white active-accent">
    Button Text
</button>

Both normal and outline buttons are also adjusted to support the new colors.

<!-- Normal Buttons -->
<button type="button" class="btn btn-accent">
  Accent Button
</button>

<button type="button" class="btn btn-salmon">
  Salmon Button
</button>

<button type="button" class="btn btn-royal-blue">
  Royal Blue Button
</button>

<button type="button" class="btn btn-java">
  Java Button
</button>

<!-- Outline Buttons -->
<button type="button" class="btn-outline-accent">
  Outline Accent
</button>

<button type="button" class="btn-outline-salmon">
  Outline Salmon
</button>

<button type="button" class="btn-outline-royal-blue">
  Outline Royal Blue
</button>

<button type="button" class="btn-outline-java">
  Outline Java
</button>

Backgrounds

The background utilities are also adjusted to support the new colors and the accent color.

<!-- Accent Background -->
<div class="bg-accent">Accent Color Background</div>

<!-- New Colors Backgrounds -->
<div class="bg-salmon">Salmon Background</div>
<div class="bg-royal-blue">Royal Blue Background</div>
<div class="bg-java">Java Background</div>

Text Utilities

The text utilities are also adjusted to support the new colors and the accent color.

<p class="text-accent">Accent Color Text</p>
<p class="text-salmon">Salmon Text</p>
<p class="text-royal-blue">Royal Blue Text</p>
<p class="text-java">Java Text</p>

Alerts

The alerts are also adjusted to support the new colors and the accent color.

<div class="alert alert-accent">Accent Alert</div>
<div class="alert alert-salmon">Salmon Alert</div>
<div class="alert alert-royal-blue">Royal Blue Alert</div>
<div class="alert alert-java">Java Alert</div>

Badges

The badges are also adjusted to support the new colors and the accent color.

<!-- Normal Badges -->
<span class="badge badge-accent">Accent Badge</span>
<span class="badge badge-salmon">Salmon Badge</span>
<span class="badge badge-royal-blue">Royal Blue Badge</span>
<span class="badge badge-java">Java Badge</span>

<!-- Outline Badges -->
<span class="badge badge-outline-accent">Accent Outline Badge</span>
<span class="badge badge-outline-salmon">Salmon Outline Badge</span>
<span class="badge badge-outline-royal-blue">Royal Blue Outline Badge</span>
<span class="badge badge-outline-java">Java Outline Badge</span>