Card

Surface with a header, body and footer.

Source: src/stylus/components/card.styl

Default

Each region is optional; use the ones you need.

Account settings

Personalise profile and workspace identity.

Anything can live in the body.
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Account settings</h3>
    <p class="card-description">Personalise profile and workspace identity.</p>
  </div>
  <div class="card-content">Anything can live in the body.</div>
  <div class="card-footer"><button type="button" class="button primary sm">Save changes</button></div>
</div>