Card
Cards are a standard piece of UI that serves as an entry point to more detailed information. A card can be a single component but is often made up of card-header, card-content,card-title sub components.
Text only Card
X
Hello world
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
<div class="card">
<span class="badge btn-round-md">X</span>
<div class="text-overlay"><span class="overlay-content">Loading ...</span></div>
<div class="card-title">Hello world</div>
<div class="card-img">
<img src="https://picsum.photos/640/400" />
</div>
<div class="card-content">
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
</div>
<div class="card-footer">
<span>like</span><span>comment</span>
<div class="icon-bar">
<i class="fa fa-heart"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
</div>
Card With Dismiss
X
Hello world
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
<div class="card card-dismiss">
<span class="badge btn-round-md">X</span>
<div class="text-overlay"><span class="overlay-content">Loading ...</span></div>
<div class="card-title">Hello world</div>
<div class="card-img">
<img src="https://picsum.photos/640/400" />
</div>
<div class="card-content">
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
</div>
<div class="card-footer">
<span>like</span><span>comment</span>
<div class="icon-bar">
<i class="fa fa-heart"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
</div>
Card without Action Buttons
<div class="card card-no-footer">
<span class="badge btn-round-md">X</span>
<div class="text-overlay"><span class="overlay-content">Loading ...</span></div>
<div class="card-title">Hello world</div>
<div class="card-img">
<img src="https://picsum.photos/640/400" />
</div>
<div class="card-content">
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
</div>
<div class="card-footer">
<span>like</span><span>comment</span>
<div class="icon-bar">
<i class="fa fa-heart"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
</div>
Image Card
X
Hello world
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
<div class="card img-card">
<span class="badge btn-round-md">X</span>
<div class="text-overlay"><span class="overlay-content">Loading ...</span></div>
<div class="card-title">Hello world</div>
<div class="card-img">
<img src="https://picsum.photos/640/400" />
</div>
<div class="card-content">
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
</div>
<div class="card-footer">
<span>like</span><span>comment</span>
<div class="icon-bar">
<i class="fa fa-heart"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
</div>
Card With Badge
X
New
Hello world
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
<div class="card">
<span class="badge btn-round-md">X</span>
<div class="text-overlay"><span class="overlay-content">Loading ...</span></div>
<h3 class="card-badge "><span class="badge-text"> New</span></h3>
<div class="card-title">Hello world</div>
<div class="card-img">
<img src="https://picsum.photos/640/400" />
</div>
<div class="card-content">
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
</div>
<div class="card-footer">
<span>like</span><span>comment</span>
<div class="icon-bar">
<i class="fa fa-heart"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
</div>
Card With Text Overlay
<div class="card card-overlay">
<span class="badge btn-round-md">X</span>
<div class="text-overlay"><span class="overlay-content">Loading ...</span></div>
<h3 class="card-badge "><span class="badge-text"> New</span></h3>
<div class="card-title">Hello world</div>
<div class="card-img">
<img src="https://picsum.photos/640/400" />
</div>
<div class="card-content">
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
</div>
<div class="card-footer">
<span>like</span><span>comment</span>
<div class="icon-bar">
<i class="fa fa-heart"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
</div>
Horizontal Cards
X
Hello world
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
<div class="card img-card card-horizontal">
<div class="text-overlay"><span class="overlay-content">Loading ...</span></div>
<span class="badge btn-round-md">X</span>
<div class="card-img">
<img src="https://picsum.photos/200/300" />
</div>
<div class="horizontal-content">
<div class="card-title">Hello world
</div>
<div class="card-content">
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum
dolor set imaat
</div>
<div class="card-footer">
<span>like</span><span>comment</span>
<div class="icon-bar">
<i class="fa fa-heart"></i><i class="fa fa-share-alt"></i
><i class="fa fa-ellipsis-v"></i>
</div>
</div></div>
</div>