Skip to content
Airframe

Card

Cards group related content with optional media, headers, and actions. Variants align with Tailwind UI Cards: basic, with header/footer, gray footer/body, edge-to-edge on mobile, and well.

Basic card

Section titled “Basic card”

Card Title

Card body content goes here.

<div class="af-card">
  <h2 class="af-card__title">Card Title</h2>
  <p class="af-card__body">Card body content goes here.</p>
</div>

Card with header

Section titled “Card with header”

Card Title

Card body content goes here.

<div class="af-card">
  <div class="af-card__header">
    <h2 class="af-card__title">Card Title</h2>
  </div>
  <p class="af-card__body">Card body content goes here.</p>
</div>
Section titled “Card with footer”

Card body content goes here.

<div class="af-card">
  <p class="af-card__body">Card body content goes here.</p>
  <div class="af-card__footer">
    <div class="af-card__actions">
      <button class="af-btn">Save</button>
      <button class="af-btn af-is-secondary">Cancel</button>
    </div>
  </div>
</div>
Section titled “Card with header and footer”

Card Title

Card body content goes here.

<div class="af-card">
  <div class="af-card__header">
    <h2 class="af-card__title">Card Title</h2>
  </div>
  <p class="af-card__body">Card body content goes here.</p>
  <div class="af-card__footer">
    <div class="af-card__actions">
      <button class="af-btn">Action</button>
    </div>
  </div>
</div>
Section titled “Card with gray footer”

Add af-is-muted to the footer, or af-card--footer-muted on the card, for a muted background that extends to the card edges.

Card body content goes here.

<div class="af-card">
  <p class="af-card__body">Card body content goes here.</p>
  <div class="af-card__footer af-is-muted">
    <div class="af-card__actions">
      <button class="af-btn">Save</button>
      <button class="af-btn af-is-secondary">Cancel</button>
    </div>
  </div>
</div>

Card with gray body

Section titled “Card with gray body”

Add af-is-muted to the body, or af-card--body-muted on the card, for a muted body background that extends to the card edges.

Card Title

Card body with muted background.

<div class="af-card">
  <h2 class="af-card__title">Card Title</h2>
  <p class="af-card__body af-is-muted">Card body with muted background.</p>
</div>

Card, edge-to-edge on mobile

Section titled “Card, edge-to-edge on mobile”

Add af-card-edge so the card bleeds to the container edges on viewports under 48rem. Use inside a padded container; override --af-card-edge-offset if your container padding differs.

Card Title

On small screens this card extends to the edges.

<div class="af-card af-card-edge">
  <h2 class="af-card__title">Card Title</h2>
  <p class="af-card__body">On small screens this card extends to the edges.</p>
</div>

Well

Section titled “Well”

A softer, muted card with no shadow. Use af-well for a simple contained block (e.g. for charts, forms, or secondary content).

Well Title

Softer card with muted background and no shadow.

<div class="af-well">
  <h2 class="af-card__title">Well Title</h2>
  <p class="af-card__body">Softer card with muted background and no shadow.</p>
</div>

Well, edge-to-edge on mobile

Section titled “Well, edge-to-edge on mobile”

Add af-well-edge so the well bleeds to the container edges on small viewports.

Well that extends to the edges on mobile.

<div class="af-well af-well-edge">
  <p class="af-card__body">Well that extends to the edges on mobile.</p>
</div>

Card with image

Section titled “Card with image”
Description

Card Title

Card body content goes here.

<div class="af-card">
  <img src="https://placehold.co/600x400" alt="Description" class="af-card__image">
  <h2 class="af-card__title">Card Title</h2>
  <p class="af-card__body">Card body content goes here.</p>
</div>

Card with overline and subtitle

Section titled “Card with overline and subtitle”
OPTIONAL OVERLINE

Card Title

Optional Subtitle

Card body content goes here.

<div class="af-card">
  <span class="af-card__overline">OPTIONAL OVERLINE</span>
  <h2 class="af-card__title">Card Title</h2>
  <span class="af-card__subtitle">Optional Subtitle</span>
  <p class="af-card__body">Card body content goes here.</p>
</div>

Card with buttons

Section titled “Card with buttons”
OPTIONAL OVERLINE

Card Title

Optional Subtitle

Card body content goes here.

<div class="af-card">
  <span class="af-card__overline">OPTIONAL OVERLINE</span>
  <h2 class="af-card__title">Card Title</h2>
  <span class="af-card__subtitle">Optional Subtitle</span>
  <p class="af-card__body">Card body content goes here.</p>
  <div class="af-card__footer">
    <div class="af-card__actions">
      <button class="af-btn">Action 1</button>
      <button class="af-btn">Action 2</button>
    </div>
  </div>
</div>
Section titled “Card with links”
OPTIONAL OVERLINE

Card Title

Optional Subtitle

Card body content goes here.

Link 1 Link 2 
<div class="af-card">
  <span class="af-card__overline">OPTIONAL OVERLINE</span>
  <h2 class="af-card__title">Card Title</h2>
  <span class="af-card__subtitle">Optional Subtitle</span>
  <p class="af-card__body">Card body content goes here.</p>
  <div class="af-card__footer">
    <div class="af-card__actions">
      <a href="#" class="af-link">Link 1</a>
      <a href="#" class="af-link">Link 2</a>
    </div>
  </div>
</div>
Section titled “Full card link”

Make the entire card clickable by using an <a> tag:

Card Title

Entire card is clickable.

<a href="/page" class="af-card">
  <h2 class="af-card__title">Card Title</h2>
  <p class="af-card__body">Entire card is clickable.</p>
</a>

Card parts

Section titled “Card parts”
  • af-card – Base card container
  • af-card-edge – Edge-to-edge on mobile (inside a padded container; override --af-card-edge-offset if needed)
  • af-card--footer-muted – Card whose footer uses muted background (or add af-is-muted on the footer)
  • af-card--body-muted – Card whose body uses muted background (or add af-is-muted on the body)
  • af-card__image – Card image (full width, top-aligned)
  • af-card__header – Optional header section
  • af-card__overline – Small uppercase text above title
  • af-card__title – Card title/heading
  • af-card__subtitle – Subtitle text below title
  • af-card__body – Main card content (af-is-muted for gray body)
  • af-card__footer – Optional footer section (af-is-muted for gray footer)
  • af-card__actions – Container for buttons/links in footer
  • af-well – Softer card (muted background, no shadow)
  • af-well-edge – Well, edge-to-edge on mobile

Hover effect

Section titled “Hover effect”

By default, cards don’t have hover effects. Add the af-has-hover modifier class to enable hover shadow enhancement:

Card Title

Hover over this card to see the shadow effect.

<div class="af-card af-has-hover">
  <h2 class="af-card__title">Card Title</h2>
  <p class="af-card__body">Hover over this card to see the shadow effect.</p>
</div>

Visual style

Section titled “Visual style”

Cards use a 1px border, --af-card-padding (default space-5), and a subtle shadow. Override --af-card-radius, --af-card-gap, and --af-card-border-width as needed. --af-card-radius also drives other boxed UI and overlays (surfaces, alerts, dialogs, menus). When the entire card is a link, it shows a focus ring for keyboard navigation.