<div class="ch-card">
  <div class="ch-card__content">
    <h3>I'm a heading</h3>
    <p class="ch-mb--0">Lorem Ipsum is simply ...</p>
  </div>
</div>

Content sections

You can use multiple ch-card__content elements and modifiers to create different card layouts.

<!-- grey card -->
<div class="ch-card">
  <div class="ch-card__content ch-card__content--grey">
    <h3>Grey card</h3>
    <p class="ch-mb--0">
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry...
    </p>
  </div>
</div>

<!-- split card -->
<div class="ch-card">
  <div class="ch-card__content">
    <h3>Split card</h3>
    <p class="ch-mb--0">
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry...
    </p>
  </div>
  <div class="ch-card__content ch-card__content--grey">
    <p class="ch-mb--0">
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry...
    </p>
  </div>
</div>

<!-- card footer -->
<div class="ch-card">
  <div class="ch-card__content">
    <h3>Footer</h3>
    <p class="ch-mb--0">
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry...
    </p>
  </div>
  <div class="ch-card__content ch-card__content--compact">
    <p class="ch-mb--0">Footer text</p>
  </div>
</div>