Atmos
Search…
Build System
forms
Starter Template
Cards
Cards inherit the same properties as bootstraps default cards. we have tuned it to match the scheme of admin panel
Default card
1
<div class="card m-b-30">
2
<div class="card-header">
3
<h5 class="card-title m-b-0">Card title</h5>
4
5
</div>
6
<div class="card-body">
7
8
<p class="card-text">Some quick example text to build on the card title and make up the bulk
9
of the card's content.</p>
10
<p>
11
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
12
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
13
nobis optio provident quas repudiandae tempore temporibus, voluptatem.
14
</p>
15
</div>
16
<div class="card-footer">
17
<a href="#!" class="btn btn-primary">Link</a>
18
</div>
19
</div>
20
Copied!
Card with controls
1
<div class="card">
2
<div class="card-header">
3
<h5 class="card-title m-b-0">Card title</h5>
4
5
<div class="card-controls">
6
7
<a href="#" class="js-card-fullscreen icon"></a>
8
<a href="#" class="js-card-refresh icon"></a>
9
<a href="#" class="js-card-close icon"></a>
10
<div class="dropdown">
11
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
12
class="icon mdi mdi-dots-vertical"></i> </a>
13
14
<div class="dropdown-menu dropdown-menu-right">
15
<button class="dropdown-item" type="button">Action</button>
16
<button class="dropdown-item" type="button">Another action</button>
17
<button class="dropdown-item" type="button">Something else here</button>
18
</div>
19
</div>
20
</div>
21
</div>
22
<div class="card-body">
23
24
<p class="card-text">Some quick example text to build on the card title and make up the bulk
25
of the card's content.</p>
26
<p>
27
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
28
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
29
nobis optio provident quas repudiandae tempore temporibus, voluptatem.
30
</p>
31
</div>
32
<div class="card-footer">
33
<a href="#!" class="btn btn-primary">Link</a>
34
</div>
35
</div>
36
Copied!
Card with scrolling body
1
<div class="card ">
2
<div class="card-header">
3
<h5 class="card-title m-b-0">Scrollable Card</h5>
4
</div>
5
<div class="card-body card-scroll">
6
<p>
7
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
8
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
9
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
10
</p>
11
12
<p>
13
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
14
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
15
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
16
</p>
17
18
<p>
19
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
20
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
21
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
22
</p>
23
24
<p>
25
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
26
dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
27
molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
28
</p>
29
30
31
</div>
32
<div class="card-footer text-md-right">
33
<a href="#!" class="btn btn-secondary">Link</a>
34
</div>
35
</div>
36
Copied!
for card scrolling to work you need to define height to
card-body default is set to 350px incard.scssLast modified 3yr ago
Copy link