Shards Dashboard Lite

The following custom components are available in Shards Dashboard Lite.

Small Stats

The Small Stats component is used in the Blog Overview template.

Default

<div class="stats-small card card-small">
    <div class="card-body px-0 pb-0">
        <div class="d-flex px-3">
            <div class="stats-small__data">
                <span class="stats-small__label mb-1 text-uppercase">Users</span>
                <h6 class="stats-small__value count m-0">2,390</h6>
            </div>
            <div class="stats-small__data text-right align-items-center">
                <span class="stats-small__percentage stats-small__percentage--increase">12.4%</span>
            </div>
        </div>
        <canvas height="60" class="analytics-overview-stats-small-1"></canvas>
    </div>
</div>

Variation 1

<div class="stats-small stats-small--1 card card-small">
    <div class="card-body p-0 d-flex">
        <div class="d-flex flex-column m-auto">
            <div class="stats-small__data text-center">
                <span class="stats-small__label text-uppercase">Posts</span>
                <h6 class="stats-small__value count my-3">2,390</h6>
            </div>
            <div class="stats-small__data">
                <span class="stats-small__percentage stats-small__percentage--increase">4.7%</span>
            </div>
        </div>
        <canvas height="120" class="blog-overview-stats-small-1"></canvas>
    </div>
</div>

Card Blog Post

The Card Blog Post component is used in the Blog Posts page template. Currently, there are 2 blog post component variations and 4 pre-built components in total:

Default

<div class="card card-small card-post h-100">
  <div class="card-post__image" style="background-image: url('images/content-management/7.jpeg');"></div>
  <div class="card-body">
    <h5 class="card-title">
      <a class="text-fiord-blue" href="#">Extremity so attending objection as engrossed</a>
    </h5>
    <p class="card-text">Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel not seeing...</p>
  </div>
  <div class="card-footer text-muted border-top py-3">
    <span class="d-inline-block">By <a class="text-fiord-blue" href="#">Alene Trenton</a> in <a class="text-fiord-blue" href="#">News</a></span>
  </div>
</div>

Variation 1 (with author element)

<div class="card card-small card-post card-post--1">
  <div class="card-post__image" style="background-image: url('images/content-management/1.jpeg');">
    <a href="#" class="card-post__category badge badge-pill badge-dark">Business</a>
    <div class="card-post__author d-flex">
      <a href="#" class="card-post__author-avatar card-post__author-avatar--small" style="background-image: url('images/avatars/0.jpg');">Written by Anna Kunis</a>
    </div>
  </div>
  <div class="card-body">
    <h5 class="card-title">
      <a class="text-fiord-blue" href="#">Conduct at an replied removal an amongst</a>
    </h5>
    <p class="card-text d-inline-block mb-3">However venture pursuit he am mr cordial. Forming musical am hearing studied be luckily. But in for determine what would see...</p>
    <span class="text-muted">28 February 2019</span>
  </div>
</div>

Aside (with author element)

<div class="card card-small card-post card-post--aside card-post--1">
  <div class="card-post__image" style="background-image: url('images/content-management/5.jpeg');">
    <a href="#" class="card-post__category badge badge-pill badge-info">Travel</a>
    <div class="card-post__author d-flex">
      <a href="#" class="card-post__author-avatar card-post__author-avatar--small" style="background-image: url('images/avatars/0.jpg');">Written by Anna Ken</a>
    </div>
  </div>
  <div class="card-body">
    <h5 class="card-title">
      <a class="text-fiord-blue" href="#">Attention he extremity unwilling on otherwise cars backwards yet</a>
    </h5>
    <p class="card-text d-inline-block mb-3">Conviction up partiality as delightful is discovered. Yet jennings resolved disposed exertion you off. Left did fond drew fat head poor jet pan flying over...</p>
    <span class="text-muted">29 February 2019</span>
  </div>
</div>