Card
Cards are containers of a single subject. These are mainly seen in social media posts & shopping site items. They contain some content and actions related to a subject.
All these cards have shadow effect.
Card with text only
These cards come with a header & a subheading followed by the text you want to display on the card. You can also customize the card by including only the description without the header.
<div class="card children-stacked text-only">
<div class="d-flex card-top">
<div class="card-header children-stacked">
<div class="card-title">Lorem ipsum </div>
<div class="card-author">by Aishwarya B</div>
</div>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
Basic card - vertical
This is a basic vertical variant of card which also includes image and action buttons along with text capabilities. These buttons provide interaction to users to perform different actions.
<div class="card children-stacked">
<img class="card-media" src="https://picsum.photos/id/152/367/267" alt="card-img">
<div class="card-header">
<div class="card-title">Lorem ipsum </div>
<div class="card-author">by Aishwarya B</div>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="card-action children-center">
<button class="btn btn-link">READ</button>
<button class="btn btn-link">BOOKMARK</button>
<button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
</div>
</div>
Card - horizontal
This variant contains the same pieces but arranged horizontally.
<div class="card card-hor">
<div class="card-top d-flex">
<img class="card-media" src="https://picsum.photos/id/152/367/267" alt="">
<div class="card-header">
<div class="card-title">Lorem ipsum </div>
<div class="card-author">by Aishwarya B</div>
</div>
</div>
<div class="card-action children-center">
<button class="btn btn-link">READ</button>
<button class="btn btn-link">BOOKMARK</button>
<button class="fa fa-share-alt btn btn-icon" aria-hidden="true"></button>
</div>
</div>
Card with a badge
This variant has a badge on the vertical card to show new/out of stock type of items.
<div class="card children-stacked">
<div class="card-media">
<img src="https://picsum.photos/id/152/367/267" alt="card-img">
<div class="card-badge">NEW</div>
</div>
<div class="card-header">
<div class="card-title">Lorem ipsum </div>
<div class="card-author">by Aishwarya B</div>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="card-action children-center">
<button class="btn btn-link">READ</button>
<button class="btn btn-link">BOOKMARK</button>
<button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
</div>
</div>
Card with a dismiss
This is a avertical card with dismiss option.
<div class="card children-stacked card-dismiss">
<div class="d-flex card-top">
<img class="card-media" src="https://picsum.photos/id/152/367/267" alt="">
<div class="card-head d-flex">
<div class="card-header children-stacked">
<div class="card-title">Lorem ipsum </div>
<div class="card-author">by Aishwarya B</div>
</div>
<i class="fas fa-times btn-icon"></i>
</div>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="card-action children-center">
<button class="btn btn-link">READ</button>
<button class="btn btn-link">BOOKMARK</button>
<button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
</div>
</div>
Card with a text overlay
This variant has text over media, where you can place the title & subtitle over the image.
<div class="card children-stacked card-overlay">
<div class="p-rel">
<img class="card-media" src="https://picsum.photos/id/152/367/267" alt="card-img">
<div class="card-header">
<div class="card-title">Lorem ipsum </div>
<div class="card-author">by Aishwarya B</div>
</div>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="card-action children-center">
<button class="btn btn-link">READ</button>
<button class="btn btn-link">BOOKMARK</button>
<button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
</div>
</div>