Card

Cards are used to group related content together.

Usage

Use the .Card class on a <div> element.

<div class="Card">
  <header class="Card-Header">
    <h3 class="Card-Title">Card Title</h3>
    <span class="Card-Subtitle">Supporting text</span>
  </header>
  <div class="Card-Content">
    <p>This is the card content.</p>
  </div>
  <footer class="Card-Footer">
    <button class="Button primary">Action</button>
  </footer>
</div>

Variants

• flat: Removes the box shadow.
• short: Constrains the card to a narrow max-width (320px).
• profile: Denser padding layout for compact cards like profiles or summaries.
• header: Removes the border under the header and increases the title size — suited for page-level section headings.

Example

Form Card

Use a <fieldset> with .Card and a <legend> with .Card-Header to create a semantically correct form section card.

<fieldset class="Card">
  <legend class="Card-Header">Personal Details</legend>
  <div class="Card-Content">
    <form class="Form grid">…</form>
  </div>
</fieldset>

Structure

• .Card-Header: Top section — contains titles, subtitles, and actions. Bordered bottom.
• .Card-Content: Main scrollable body.
• .Card-Footer: Bottom section for action buttons. Bordered top, right-aligned.
• .Card-Title: Primary heading inside the header.
• .Card-Subtitle: Secondary supporting text below the title.