Atmos
Search
K

Cards

Cards inherit the same properties as bootstraps default cards. we have tuned it to match the scheme of admin panel

Default card

<div class="card m-b-30">
<div class="card-header">
<h5 class="card-title m-b-0">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
nobis optio provident quas repudiandae tempore temporibus, voluptatem.
</p>
</div>
<div class="card-footer">
<a href="#!" class="btn btn-primary">Link</a>
</div>
</div>

Card with controls

<div class="card">
<div class="card-header">
<h5 class="card-title m-b-0">Card title</h5>
<div class="card-controls">
<a href="#" class="js-card-fullscreen icon"></a>
<a href="#" class="js-card-refresh icon"></a>
<a href="#" class="js-card-close icon"></a>
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
class="icon mdi mdi-dots-vertical"></i> </a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
nobis optio provident quas repudiandae tempore temporibus, voluptatem.
</p>
</div>
<div class="card-footer">
<a href="#!" class="btn btn-primary">Link</a>
</div>
</div>

Card with scrolling body

<div class="card ">
<div class="card-header">
<h5 class="card-title m-b-0">Scrollable Card</h5>
</div>
<div class="card-body card-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
</p>
</div>
<div class="card-footer text-md-right">
<a href="#!" class="btn btn-secondary">Link</a>
</div>
</div>
for card scrolling to work you need to define height to card-body default is set to 350px incard.scss