Cards
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Text Only Cards
Text Only Card is one that contains a title, a descriptive text. To use the Card Component,
add .card-title and .card-text
inside a <div> with class .card-text-only
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="card card-text-only">
<div class="card-header">Blue Watch</div>
<p class="card-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
Card With Badges & Shadow
Use the .card-badge class along with .card to create Cards with a badge.
You can also add the .card-title, .card-header, .card-img, .card-text,
.card-buttons, .card-button and .card-icon classes to add more details to your card.
To make a Card with a Shadow, use the .card-with-shadow class on your card.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
<div class="card space-S">
<span class="card-badge">25% OFF</span>
<div class="card-img">
<img src="/assets/images/card-img-1.jpeg" alt="blue-watch"/>
</div>
<div class="card-header">Blue Watch</div>
<div class="card-title">by Rolex</div>
<p class="card-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
</p>
<div class="card-buttons">
<button class="card-button">ADD TO CART</button>
<i class="card-icon material-icons material-icons-outlined">favorite_border</i>
<i class="card-icon material-icons material-icons-outlined">shopping_cart</i>
</div>
</div>
<div class="card card-with-shadow space-S">
<div class="card-img">
<img src="/assets/images/card-img-2.jpeg" alt="blue-watch"/>
</div>
<div class="card-header">Blue Watch</div>
<div class="card-title">by Analogue</div>
<p class="card-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
</p>
<div class="card-buttons">
<button class="card-button">ADD TO CART</button>
<i class="card-icon material-icons material-icons-outlined">favorite_border</i>
</div>
</div>
Cards with Dismiss & Text Overlay
You can create cards with a Text overlay using the .card-text-overlay class. The dismiss feature can be achieved by adding the class .btn-close. You can refer the code snippet below.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
<div class="card card-text-overlay space-S">
<div class="card-img">
<img src="/assets/images/card-img-1.jpeg" alt="blue-watch"/>
<div class="card-header">Out of Stock</div>
</div>
<img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
<p class="card-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
</p>
<div class="card-buttons">
<button class="card-button">ADD TO CART</button>
<i class="card-icon material-icons material-icons-outlined">favorite_border</i>
<i class="card-icon material-icons material-icons-outlined">shopping_cart</i>
</div>
</div>
<div class="card space-S">
<div class="card-img">
<img src="/assets/images/card-img-1.jpeg" alt="blue-watch"/>
</div>
<img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
<div class="card-header">Blue Watch</div>
<div class="card-title">by Rolex</div>
<p class="card-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
</p>
<div class="card-buttons">
<button class="card-button">ADD TO CART</button>
<i class="card-icon material-icons material-icons-outlined">favorite_border</i>
<i class="card-icon material-icons material-icons-outlined">shopping_cart</i>
</div>
</div>
Vertical and Horizontal Cards
You can create Vertical cards using the original .card class and also create Horizontal cards using the .card-horizontal class. You can refer the code snippet below.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
<div class="card space-S">
<div class="card-img">
<img src="/assets/images/card-img-1.jpeg" alt="blue-watch"/>
</div>
<img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
<div class="card-header">Blue Watch</div>
<div class="card-title">by Rolex</div>
<p class="card-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
</p>
<div class="card-buttons">
<button class="card-button">ADD TO CART</button>
<i class="card-icon material-icons material-icons-outlined">favorite_border</i>
<i class="card-icon material-icons material-icons-outlined">shopping_cart</i>
</div>
</div>
<div class="card card-horizontal space-S">
<div class="card-img">
<img src="/assets/images/card-img-1.jpeg" alt="blue-watch"/>
<div class="flex-col-container">
<div class="card-header">Blue Watch</div>
<div class="card-title">by Rolex</div>
</div>
</div>
<img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
<p class="card-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio enim optio
</p>
<div class="card-buttons">
<button class="card-button">ADD TO CART</button>
<i class="card-icon material-icons material-icons-outlined">favorite_border</i>
<i class="card-icon material-icons material-icons-outlined">shopping_cart</i>
</div>
</div>