Molecule

Card

Show code
Card-Header

Card-Title

This card has supporting text below as a natural lead-in to additional content.

            
              <div class="card">
  <div class="card-header">
    Card-Header
  </div>
  <div class="card-image">
    <img class="card-img" src="/images/_stage/01_csm_heromain_b36cd97936.jpg" alt="">
  </div>
  <div class="card-block">
    <h4 class="card-title">
      Card-Title
    </h4>
    <p class="card-text">
      This card has supporting text below as a natural lead-in to additional content.
  </div>
  <div class="card-footer">
    Card-Footer
  </div>
</div>

            
          
Show code

Card-Title

This card has supporting text below as a natural lead-in to additional content.

            
              <div class="card card--type-a">
  <div class="card-image">
    <img class="card-img" src="/images/_stage/01_csm_heromain_b36cd97936.jpg" alt="">
  </div>
  <div class="card-block">
    <h4 class="card-title">
      Card-Title
    </h4>
    <p class="card-text">
      This card has supporting text below as a natural lead-in to additional content.
  </div>
</div>