Card
Cards are used to display collection of items and actions based on individual concept. They come in different styles with different purposes.
Example for vertical card.
25% OFF
Vinta Bag
Black Leather Made$300
<div class="card-container">
<header class="card__header">
<img
src="https://images.unsplash.com/photo-1547949003-9792a18a2601?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="bag"
class="card__image"
/>
<span class="card-badge">25% OFF</span>
</header>
<div class="card__body">
<div class="card__details">
<h4>Vinta Bag</h4>
<h6>Black Leather Made<span class="price-tag">$300</span></h6>
</div>
</div>
<footer class="card__footer">
<button class="card__button">
<span><i class="fas fa-shopping-cart"></i></span> Add to Cart
</button>
<span class="card__icon-heart"><i class="fas fa-heart"></i></span>
</footer>
</div>
Example for horizontal card.
25% OFF
Vinta Bag
Black Leather Made$300
<div class="card-container card-container-hz">
<header class="card__header card-header-hz">
<img
src="https://images.unsplash.com/photo-1547949003-9792a18a2601?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="bag"
class="card__image"
/>
<span class="card-badge">25% OFF</span>
</header>
<div class="card-content card-content-hz">
<div class="card__body card-body-hz">
<div class="card__details card-details-hz">
<h4>Vinta Bag</h4>
<h6>Black Leather Made<span class="price-tag">$300</span></h6>
</div>
</div>
<footer class="card__footer card-footer-hz">
<button class="card__button">
<span><i class="fas fa-shopping-cart"></i></span> Add to Cart
</button>
<span class="card__icon-heart"
><i class="fas fa-heart"></i
></span>
</footer>
</div>
</div>
Example for card with dismiss button.
25% OFF
Vinta Bag
Black Leather Made$300
<div class="card-container">
<header class="card__header">
<img
src="https://images.unsplash.com/photo-1547949003-9792a18a2601?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="bag"
class="card__image"
/>
<span class="card-badge">25% OFF</span>
<i class="fas fa-times card-dismiss"></i>
</header>
<div class="card__body">
<div class="card__details">
<h4>Vinta Bag</h4>
<h6>Black Leather Made<span class="price-tag">$300</span></h6>
</div>
</div>
<footer class="card__footer">
<button class="card__button">
<span><i class="fas fa-shopping-cart"></i></span> Add to Cart
</button>
<span class="card__icon-heart"><i class="fas fa-heart"></i></span>
</footer>
</div>
Example for card with text overlay.
25% OFF
Vinta Bag
Black Leather Made$300
<div class="card-container overlay-container">
<header class="card__header">
<img
src="https://images.unsplash.com/photo-1547949003-9792a18a2601?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="bag"
class="card__image"
/>
<span class="card-badge">25% OFF</span>
</header>
<div class="card__body">
<div class="card__details">
<h4>Vinta Bag</h4>
<h6>Black Leather Made<span class="price-tag">$300</span></h6>
</div>
</div>
<footer class="card__footer">
<button class="card__button">
<span><i class="fas fa-shopping-cart"></i></span> Add to Cart
</button>
<span class="card__icon-heart"><i class="fas fa-heart"></i></span>
</footer>
<div class="text-overlay-container">
<div class="text-overlay">OUT OF STOCK</div>
</div>
</div>
Example for card with shadow.
25% OFF
Vinta Bag
Black Leather Made$300
<div class="card-container box-shadow">
<header class="card__header">
<img
src="https://images.unsplash.com/photo-1547949003-9792a18a2601?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="bag"
class="card__image"
/>
<span class="card-badge">25% OFF</span>
</header>
<div class="card__body">
<div class="card__details">
<h4>Vinta Bag</h4>
<h6>Black Leather Made<span class="price-tag">$300</span></h6>
</div>
</div>
<footer class="card__footer">
<button class="card__button">
<span><i class="fas fa-shopping-cart"></i></span> Add to Cart
</button>
<span class="card__icon-heart"><i class="fas fa-heart"></i></span>
</footer>
</div>
Example for text only card.
" A card is a piece of design that separates itself from the rest
of the page, giving the user a hint to focus on it."
<div class="card-container">
<div class="text-only">
" A card is a piece of design that separates itself from the rest
of the page, giving the user a hint to focus on it."
</div>
</div>