Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Basic card
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card-container">
<img
class="card-img-top"
src="https://picsum.photos/600/400"
alt="card-img"
/>
<div class="card-info">
<h3 class="card-title">Our Changing Planet</h3>
<p class="card-author">by kurt Wagner</p>
</div>
<div class="card-body">
<p class="description">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card-action">
<button class="action-btn">READ</button>
<button class="action-btn">BOOKMARK</button>
<button class="action-icon"><i class="fa fa-heart"></i></button>
<button class="action-icon">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</button>
<button class="action-icon">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
Basic card with Badge
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card-container">
<img
class="card-img-top"
src="https://picsum.photos/600/400"
alt="card-img"
/>
<span class="badge-card">Special offer</span>
<div class="card-info">
<h3 class="card-title">Our Changing Planet</h3>
<p class="card-author">by kurt Wagner</p>
</div>
<div class="card-body">
<p class="description">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card-action">
<button class="action-btn">READ</button>
<button class="action-btn">BOOKMARK</button>
<button class="action-icon"><i class="fa fa-heart"></i></button>
<button class="action-icon">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</button>
<button class="action-icon">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
Basic Card with Dismiss
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card-container">
<img
class="card-img-top"
src="https://picsum.photos/600/400"
alt="card-img"
/>
<span class="card-dismiss"><i class="fas fa-times"></i></span>
<div class="card-info">
<h3 class="card-title">Our Changing Planet</h3>
<p class="card-author">by kurt Wagner</p>
</div>
<div class="card-body">
<p class="description">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card-action">
<button class="action-btn">READ</button>
<button class="action-btn">BOOKMARK</button>
<button class="action-icon"><i class="fa fa-heart"></i></button>
<button class="action-icon">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</button>
<button class="action-icon">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
Basic card with Text over Media
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card-container">
<div class="img-info-container">
<img
class="card-img-top"
src="https://picsum.photos/600/400"
alt="card-img"
/>
<div class="card-info text-over-img">
<h3 class="card-title">Our Changing Planet</h3>
<p class="card-author">by kurt Wagner</p>
</div>
</div>
<div class="card-body body-after-img">
<p class="description">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card-action">
<button class="action-btn">READ</button>
<button class="action-btn">BOOKMARK</button>
<button class="action-icon"><i class="fa fa-heart"></i></button>
<button class="action-icon">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</button>
<button class="action-icon">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
Text only Card
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card-container">
<div class="card-info">
<h3 class="card-title">Our Changing Planet</h3>
<p class="card-author">by kurt Wagner</p>
</div>
<div class="card-body">
<p class="description">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card-action">
<button class="action-btn">READ</button>
<button class="action-btn">BOOKMARK</button>
<button class="action-icon"><i class="fa fa-heart"></i></button>
<button class="action-icon">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</button>
<button class="action-icon">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
Card with Header
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card-container with-header">
<img
class="card-img-top"
src="https://picsum.photos/600/400"
alt="card-img"
/>
<div class="card-info">
<h3 class="card-title">Our Changing Planet</h3>
<p class="card-author">by kurt Wagner</p>
</div>
<div class="card-body body-after-img">
<p class="description">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card-action">
<button class="action-btn">READ</button>
<button class="action-btn">BOOKMARK</button>
<button class="action-icon"><i class="fa fa-heart"></i></button>
<button class="action-icon">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</button>
<button class="action-icon">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
Card with Horizontal image and Text
Our Changing Planet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card-container">
<div class="card-part-1">
<img
class="card-img-top"
src="https://picsum.photos/600/400"
alt="card-img"
/>
<div class="card-info">
<h3 class="card-title">Our Changing Planet</h3>
<p class="card-author">by kurt Wagner</p>
</div>
</div>
<div class="card-action">
<button class="action-btn">READ</button>
<button class="action-btn">BOOKMARK</button>
<button class="action-icon"><i class="fa fa-heart"></i></button>
<button class="action-icon">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</button>
<button class="action-icon">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>