Card

A flexible container for grouped content. Outlined by default, with modifiers for flat, shadow, interactive hover, and horizontal layout. Roles change the border color; the --subtle modifier tints the background.

Default card

<div class="ln-card">
  <div class="ln-card__header">
    <span class="ln-card__eyebrow">Component</span>
    <h3 class="ln-card__title">Card title</h3>
    <p class="ln-card__subtitle">Optional subtitle text</p>
  </div>
  <div class="ln-card__body">
    <p>Card body content goes here. It fills the available space
       and pushes the footer to the bottom.</p>
  </div>
  <div class="ln-card__footer">
    <span class="text-muted text-body-sm">Footer content</span>
  </div>
</div>

Card body content goes here. It fills the available space and pushes the footer to the bottom.

Interactive card with shadow

<div class="ln-card ln-card--interactive">
  <div class="ln-card__body">
    <h3 class="ln-card__title">Hover to see the lift effect</h3>
    <p>Interactive cards raise on hover with a shadow transition.</p>
  </div>
</div>

Hover to see the lift effect

Interactive cards raise on hover with a shadow transition.

Horizontal layout

<div class="ln-card ln-card--horizontal">
  <div class="ln-card__media">
    <div class="ln-card__media-object bg-surface-sunken p-6 text-center text-muted">Image</div>
  </div>
  <div class="ln-card__body">
    <h3 class="ln-card__title">Side-by-side card</h3>
    <p>Media sits on the left with body content on the right.</p>
  </div>
</div>

Image

Side-by-side card

Media sits on the left with body content on the right.

Reference

Class	Description	Responsive
`.ln-card`	Card container with outline border	No
`.ln-card__media`	Full-bleed image area	No
`.ln-card__media-object`	Media content (image, video, or placeholder) inside media area	No
`.ln-card__header`	Header wrapper	No
`.ln-card__eyebrow`	Uppercase label above title	No
`.ln-card__title`	Card heading	No
`.ln-card__subtitle`	Secondary text below title	No
`.ln-card__body`	Main content area	No
`.ln-card__footer`	Footer area pushed to bottom	No
`.ln-card__actions`	Action button row	No
`.ln-card__link`	Stretched link overlay	No
`.ln-card--flat`	Remove outline border	No
`.ln-card--shadow-{1–4}`	Elevation shadow levels	No
`.ln-card--interactive`	Hover lift and shadow effect	No
`.ln-card--horizontal`	Side-by-side media and content	No
`.ln-card--pad-sm`	Compact padding	No
`.ln-card--pad-md`	Default padding	No
`.ln-card--pad-lg`	Generous padding	No
`.ln-card--subtle`	Sunken background	No
`.ln-card--{role}`	Role colour (primary, success, warning, danger, info, secondary)	No