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”
<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”
<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”
<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”
<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.

<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.

<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.

<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).

<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.

<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”
<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”
<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”
<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”
<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:

<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:

<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 have a subtle shadow. When the entire card is a link, it shows a focus ring for keyboard navigation.