Card

A bounded surface with optional header and footer. Slots only - the card has no opinion about what goes in it.

Reference

`sk-card`

Header and footer are optional; body is the usual single child. All three are plain slots.

<div class="sk-card">
  <div class="sk-card-header">
    <h3 class="sk-card-title">Title</h3>
    <p class="sk-card-subtitle">Subtitle</p>
  </div>
  <div class="sk-card-body"></div>
  <div class="sk-card-footer"></div>
</div>

Attribute	Type	Default	Notes
`data-elevated`	`"true"`	`bordered`	Swaps the border for a shadow. Pick one per surface - mixing bordered and elevated cards in one view reads as a bug.
`data-interactive`	`"true"`	-	Hover affordance. Prefer rendering the card as an <a> rather than adding a click handler to a div.

`sk-card-media`

A 16:9 image slot that crops rather than distorts.

<img class="sk-card-media" src="" alt="">

Examples

Basic

Card title

Supporting subtitle

Show markup

<div class="sk-card">
  <div class="sk-card-body">
    <div class="sk-flex sk-flex-col sk-gap-2">
      <h3 class="sk-card-title">
        Card title
      </h3>
      <p class="sk-card-subtitle">
        Supporting subtitle
      </p>
    </div>
  </div>
</div>

With header and footer

Card title

Supporting subtitle

Body content. The card sets padding and borders and nothing else.

Show markup

<div class="sk-card">
  <div class="sk-card-header">
    <div class="sk-flex sk-flex-col sk-gap-1">
      <h3 class="sk-card-title">
        Card title
      </h3>
      <p class="sk-card-subtitle">
        Supporting subtitle
      </p>
    </div>
    <button class="sk-button" type="button" data-variant="quiet" data-size="sm">
      Action
    </button>
  </div>
  <div class="sk-card-body">
    <p>
      Body content. The card sets padding and borders and nothing else.
    </p>
  </div>
  <div class="sk-card-footer">
    <button class="sk-button" type="button" data-variant="solid" data-size="sm">
      Confirm
    </button>
    <button class="sk-button" type="button" data-variant="quiet" data-size="sm">
      Dismiss
    </button>
  </div>
</div>

Elevated

Border swapped for a shadow.

Bordered

Elevated

Show markup

<div class="sk-flex sk-flex-wrap sk-items-start sk-gap-4">
  <div class="sk-card">
    <div class="sk-card-body">
      <h3 class="sk-card-title">
        Bordered
      </h3>
    </div>
  </div>
  <div class="sk-card" data-elevated="true">
    <div class="sk-card-body">
      <h3 class="sk-card-title">
        Elevated
      </h3>
    </div>
  </div>
</div>

Interactive

CardLink renders an anchor rather than a div with a click handler, so keyboard focus, middle-click and copy-link-address all work without any JavaScript.

Button

Five variants, three sizes

Field

Input, textarea, select, check

Show markup

<div class="sk-flex sk-flex-wrap sk-items-start sk-gap-4">
  <a class="sk-card" href="/c/button" data-interactive="true">
    <div class="sk-card-body">
      <div class="sk-flex sk-flex-col sk-gap-1">
        <h3 class="sk-card-title">
          Button
        </h3>
        <p class="sk-card-subtitle">
          Five variants, three sizes
        </p>
      </div>
    </div>
  </a>
  <a class="sk-card" href="/c/field" data-elevated="true" data-interactive="true">
    <div class="sk-card-body">
      <div class="sk-flex sk-flex-col sk-gap-1">
        <h3 class="sk-card-title">
          Field
        </h3>
        <p class="sk-card-subtitle">
          Input, textarea, select, check
        </p>
      </div>
    </div>
  </a>
</div>