Card

A surface that groups related content. Use <article> when the card is self-contained content, a <div> otherwise. No JavaScript.

CSS: included in ivolt.css; standalone css/components/card.css.

A card with body and footerfixtures/card/basic.htmlOpen alone

<article class="iv-card" style="max-width: 24rem">
  <div class="iv-card__body">
    <h3 class="iv-card__title">Editorial catalogue</h3>
    <p class="iv-u-text-muted iv-u-m-0">Cards, filters and a detail page built from the same primitives.</p>
  </div>
  <div class="iv-card__footer">
    <a class="iv-button iv-button--ghost iv-button--sm" href="#recipes">Preview</a>
    <a class="iv-button iv-button--primary iv-button--sm" href="#recipes">Open recipe</a>
  </div>
</article>

Media, flat and footer actions

Media, flat and footer actionsfixtures/card/media.htmlOpen alone

<div class="iv-grid iv-u-gap-4 iv-u-grid-cols-1 iv-u-md-grid-cols-3">
  <article class="iv-card">
    <div class="iv-card__media" aria-hidden="true"></div>
    <div class="iv-card__body">
      <h3 class="iv-card__title">Quarterly review</h3>
      <p class="iv-u-m-0">Placeholder media (16:9). Real images use an <code>&lt;img&gt;</code> inside the media block.</p>
    </div>
  </article>
  <article class="iv-card iv-card--flat">
    <div class="iv-card__body">
      <h3 class="iv-card__title">Flat card</h3>
      <p class="iv-u-m-0">No shadow, border only. Suits dense layouts and dark surfaces.</p>
    </div>
  </article>
  <article class="iv-card">
    <div class="iv-card__body">
      <h3 class="iv-card__title">Footer actions</h3>
      <p class="iv-u-m-0">Actions align to the end of the footer.</p>
    </div>
    <div class="iv-card__footer">
      <button class="iv-button iv-button--primary iv-button--sm" type="button">Action</button>
    </div>
  </article>
</div>

With photographs

Real images, proximity-lit edges and a lift on hover.

Cards with photographsfixtures/card/photo.htmlOpen alone

<div class="iv-grid iv-grid--auto" style="--iv-grid-min: 16rem">
  <article class="iv-card iv-edge-near iv-elevate">
    <figure class="iv-card__media"><img src="/photos/p1059.jpg" width="1280" height="800" alt="A workshop table with tools and a leather apron" loading="lazy"></figure>
    <div class="iv-card__body"><h3 class="iv-card__title">Workshop notes</h3><p>Photograph by Clark Street Mercantile on Unsplash. Sample copy: cards with real media, proximity-lit edges and a lift on hover.</p></div>
    <footer class="iv-card__footer"><a class="iv-button iv-button--secondary iv-button--sm" href="#card-photo-note">Read more</a></footer>
  </article>
  <article class="iv-card iv-edge-near iv-elevate">
    <figure class="iv-card__media"><img src="/photos/p1074.jpg" width="1280" height="800" alt="A lion resting in dry grass" loading="lazy"></figure>
    <div class="iv-card__body"><h3 class="iv-card__title">Field guide</h3><p>Photograph by Samuel Scrimshaw on Unsplash. Media keeps its aspect ratio and the card never exceeds its column.</p></div>
    <footer class="iv-card__footer"><a class="iv-button iv-button--secondary iv-button--sm" href="#card-photo-note">Read more</a></footer>
  </article>
  <article class="iv-card iv-edge-near iv-elevate">
    <figure class="iv-card__media"><img src="/photos/p1084.jpg" width="1280" height="800" alt="Icebergs and dark water under a low sky" loading="lazy"></figure>
    <div class="iv-card__body"><h3 class="iv-card__title">Cold coast</h3><p>Photograph by Jay Ruzesky on Unsplash. Alt text describes the picture; decorative images would use an empty alt.</p></div>
    <footer class="iv-card__footer"><a class="iv-button iv-button--secondary iv-button--sm" href="#card-photo-note">Read more</a></footer>
  </article>
</div>
<p id="card-photo-note" class="iv-u-text-sm iv-u-text-muted iv-u-m-0" style="margin-block-start: var(--iv-space-3)">The links only jump to this note.</p>

.iv-root {
  --iv-grid-min: 16rem;
}

Anatomy

Class	Role
`iv-card`	Surface with border, radius and shadow; flex column.
`iv-card__media`	16:9 area; an `<img>` inside is cropped with `object-fit: cover`.
`iv-card__body`	Padded content that grows to fill the card.
`iv-card__title`	Heading inside the body (pick the right level for the page).
`iv-card__footer`	Actions aligned to the end.
`iv-card--flat`	No shadow.

Elevation

A card rests on --iv-shadow-ambient, the shared resting elevation added in v0.6: one token that already carries the edge ring a dark theme needs and the soft drop a light one does. Under a pointer it steps up to --iv-shadow-2; the lift is inside @media (hover: hover), so a touch screen never gets a stuck hover state, and it is a shadow change only, with no travel to jog the layout.

Two public locals retune it in one line: --iv-card-shadow for the resting elevation and --iv-card-shadow-hover for the one under the pointer. Set either to none to cancel it — that is exactly what iv-card--flat does. Together with --iv-card-bg, --iv-card-radius and --iv-card-padding, that is the whole surface of the component.

Common mistakes

Making the whole card a link with nested interactive controls. Link the title instead.
Skipping heading levels inside cards.

Every content component