Card

Flexible container with header / media / body / footer sub-elements. Visual and layout variants.

Default

Body content goes here.

<div class="card">
  <div class="card__header">
    <h3 class="card__title">Title</h3>
    <p class="card__subtitle">Subtitle</p>
  </div>
  <div class="card__body">Content</div>
  <div class="card__footer">Actions</div>
</div>

With media (flush to edges)

Media card

Media reaches the card edges via a negative margin.

<div class="card">
  <div class="card__media">
    <img src="..." alt="...">
  </div>
  <div class="card__body">…</div>
</div>

Visual variants

Soft

Tinted background.

Elevated

Shadow-lg.

Accented

Top accent line.

Interactive

Hover: lift + shadow.

<div class="card card--elevated">…</div>
<div class="card card--accented">…</div>
<div class="card card--interactive">…</div>

Horizontal layout

Horizontal

Media left, body right.

<div class="card card--horizontal">
  <div class="card__media">…</div>
  <div class="card__body">…</div>
</div>

Modifiers

Class	Effect
`.card`	Base — padded, bordered, max-width 36rem.
`.card--soft`	Tinted background (`--soft`).
`.card--elevated`	Drop shadow (`--shadow-lg`).
`.card--glass`	Translucent bg + backdrop blur.
`.card--interactive`	Hover: translateY(-1px) + shadow.
`.card--accented`	Top 3px accent border.
`.card--bordered / --borderless`	Toggle base border.
`.card--horizontal`	Media left, body right.
`.card--compact / --spacious`	Scale padding down / up.
`.card--fluid`	Remove max-width.
`.card--narrow / --wide`	Set max-width to 24rem / 48rem.
`.card--centered`	Auto margin-inline.
`.card--stretch`	Stretch to grid cell height.
`.card__header / __title / __subtitle / __media / __body / __footer`	Sub-elements.