Card

A container for related content, semantically an <article> or <section> with @utility card-* classes.

Card Title

This is the content of the card. It's marked up as an article since it represents an independent piece of content.

Usage

card.html

<article class="card">
  <header class="card-title">Card Title</header>
  <div class="card-content">
    <p>This is the content of the card.</p>
  </div>
  <footer class="card-footer">
    <button class="btn btn-outlined color-group-neutral">Cancel</button>
    <button class="btn btn-solid color-group-primary">Save</button>
  </footer>
</article>