Card

<div class="c-card">
  <div class="c-card__header">
    <div class="c-card__header-left">
      <h2 class="c-card__title">Card title</h2>
      <p class="c-card__subtitle">Card subtitle</p>
    </div>
  </div>
  <div class="c-card__body">
    <div class="c-card__section">
      <p>Section A</p>
    </div>
    <div class="c-card__section">
      <p>Section B</p>
    </div>
  </div>
</div>

<div class="c-card c-card--success">
  <div class="c-card__body">
    <p>Success card</p>
  </div>
</div>

<div class="c-card c-card--warning">
  <div class="c-card__body">
    <p>Warning card</p>
  </div>
</div>

<div class="c-card c-card--error">
  <div class="c-card__body">
    <p>Error card</p>
  </div>
</div>

<div class="c-card c-card--primary">
  <div class="c-card__body">
    <p>Primary card</p>
  </div>
</div>