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

Loading ...
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

Loading ...
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

Loading ...
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

Loading ...
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

Loading ...
X
Hello world
lorem ipsum dolor set imaat. lorem ipsum dolor set imaat. lorem ipsum dolor set imaat

<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

Loading ...
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>