Introduction

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.

Simple Card

Default Card

<div class="card-grid"> 
 <div class="card-wrap">
  <div class="card">
   <div> 
    <h5>Title</h5>
     <!-- Your content should be here -->
   </div> 
  </div>
 </div>
</div>             
        

Card with image

This is an example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Another Card with image

This is an example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code :

<div class="card-grid"> 
 <div class="card-wrap">
  <div class="card">
  <img src="../path/img.jpg">
   <div> 
    <h5>Title</h5>
     <!-- Your content should be here -->
   </div> 
  </div>
 </div>
</div>   

<div class="card-grid"> 
 <div class="card-wrap">
  <div class="card">
   <div> 
    <h5>Title</h5>
     <!-- Your content should be here -->
   </div> 
   <img src="../path/img.jpg">
  </div>
 </div>
</div>           
        

Card with video

Code :

<div class="card-grid"> 
 <div class="card-wrap">
  <div class="card">
  <iframe class="card-video" width="500" height="300" src="../path/video.mp4" frameborder="0" allowfullscreen=""></iframe>
   <div> 
    <h5>Title</h5>
     <!-- Your content should be here -->
   </div> 
  </div>
 </div>
</div> 
      

SCSS

// ---------------------------------------------------------------
// This file contains all styles related to the card component.
// ---------------------------------------------------------------

.card-grid {
  width: 100%;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.card-wrap {
  float: left;
  width: 100%;
  padding: 5px;
}

@media (min-width: 500px) {
  .card-wrap {
    width: 100%;
  }
}

.card {
  background-color: white;
  border-radius: 5px;
  border: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
  > div {
    padding: 0 1em;
  }
}

.card-video, .card-img {
  width: 100%;
}