Card with only text
This is the most basic card, it has just the heading and the text content.
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus laborum exercitationem voluptates sequi molestias fugit nobis.
<div class="card card-outline">
<div class="card-header">
<h3 class="card-title">Card Title</h3>
</div>
<div class="card-body">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus laborum exercitationem
voluptates sequi molestias fugit nobis.
</p>
</div>
</div>
Card with dismiss button
This button has a dismiss button which can be used with user preferable functionality to close the card. Also it has an additional shadow on hover, this is added using class card-shadow
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus laborum exercitationem voluptates sequi molestias fugit nobis.
<div class="card card-shadow">
<div class="card-header">
<h3 class="card-title">Card Title</h3>
<button class="btn btn-icon">
<i class="fas fa-times"></i>
</button>
</div>
<div class="card-body">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus laborum exercitationem voluptates
sequi molestias fugit nobis.
</p>
</div>
</div>
Card with Image
This card has an image and a body with heading and text
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus laborum exercitationem voluptates sequi molestias fugit nobis.
<div class="card">
<img class="card-image" src="../../assets/image-4.jpg" alt="cat image for card">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus laborum exercitationem voluptates sequi
molestias fugit nobis.
</p>
</div>
</div>
Card with Image and a Button.
This card has an image and a body with heading, text and a contained action button.
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus laborum exercitationem voluptates sequi molestias fugit nobis.
<div class="card">
<img class="card-image" src="../../assets/image-4.jpg" alt="cat image for card">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus laborum exercitationem voluptates sequi
molestias fugit nobis.
</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
Card with Badges
This card has badges to allow user to have some eye catching text or info, also a like icon badge.
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<div class="card">
<span class="card-badge">New</span>
<span class="card-badge-heart">
<i class="fas fa-heart"></i>
</span>
<img class="card-image card-image-vertical" src="../../assets/image-2.jpg"
alt="cat potrait image for card">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
Horizontal Card
This card is designed as horizontal which has text on the right side of card and image on left side. It is also responsive on smaller screens it becomes vertical card.
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit, Necessitatibus laborum exercitationem voluptates sequi molestias fugit nobis, facilis unde soluta quos saepe dignissimos nihil omnis possimus eum cupiditate!
<div class="card card-horizontal">
<img class="card-image card-image-vertical" src="../../assets/image-2.jpg"
alt="cat potrait image for card">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit,
Necessitatibus laborum exercitationem voluptates sequi
molestias fugit nobis, facilis unde soluta quos saepe
dignissimos nihil omnis possimus eum cupiditate!
</p>
<button class="btn" href="#">share</button>
<button class="btn btn-primary">Read more</button>
</div>
</div>
Card with Text Overlay
This card has will display text over the whole card.
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus laborum exercitationem voluptates sequi molestias fugit nobis.
<div class="card">
<img class="card-image" src="../../assets/image-4.jpg" alt="cat image for card">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus laborum exercitationem voluptates
sequi molestias fugit nobis.
</p>
<button class="btn btn-primary">Read more</button>
</div>
<div class="overlay-container">
<h4 class="overlay-text">THIS BLOG HAS BEEN DELETED</h4>
</div>
</div>