Card

wu-card is a raised surface with a border, a large radius and a small shadow. The body grows, so footers line up across a row of cards.

Class or variable	Effect
`wu-card`	Root. Column of parts
`wu-card-header`	Part. Title and actions in a row, with a line below
`wu-card-title`	Part. Card heading
`wu-card-body`	Part. Main content; grows to fill the card
`wu-card-footer`	Part. Actions at the end, with a line above
`wu-card-link`	Part. One link stretched over the whole card
`--wu-card--Padding`	Padding of header, body and footer

Body only

A card with only a body.

<div class="wu-card">
  <div class="wu-card-body">A card with only a body.</div>
</div>

Header, body and footer

Team plan

Active

Five seats, shared projects and priority support.

<article class="wu-card">
  <header class="wu-card-header">
    <h3 class="wu-card-title">Team plan</h3>
    <span class="wu-badge success">Active</span>
  </header>
  <div class="wu-card-body">Five seats, shared projects and priority support.</div>
  <footer class="wu-card-footer">
    <button class="wu-btn" type="button">Cancel plan</button>
    <button class="wu-btn brand" type="button">Add seats</button>
  </footer>
</article>

Whole-card link

wu-card-link on one real link, usually in the title, stretches it over the card. Hover raises the shadow and underlines the link; keyboard focus rings the whole card. Other buttons and links in the card stay clickable above it.

Quarterly report

Revenue, churn and new accounts.

Release notes

What changed in each version.

<div class="grid cols-1 cols-2@md gap-4">
  <article class="wu-card">
    <div class="wu-card-body">
      <h3 class="wu-card-title"><a class="wu-card-link" href="#">Quarterly report</a></h3>
      <p class="text-muted mt-2">Revenue, churn and new accounts.</p>
    </div>
  </article>
  <article class="wu-card">
    <div class="wu-card-body">
      <h3 class="wu-card-title"><a class="wu-card-link" href="#">Release notes</a></h3>
      <p class="text-muted mt-2">What changed in each version.</p>
    </div>
    <footer class="wu-card-footer">
      <button class="wu-btn sm" type="button">Subscribe</button>
    </footer>
  </article>
</div>

Padding

Compact

Header, body and footer share the padding.

<div class="wu-card" style="--wu-card--Padding: var(--wu-space-3)">
  <div class="wu-card-header"><h3 class="wu-card-title">Compact</h3></div>
  <div class="wu-card-body">Header, body and footer share the padding.</div>
</div>

Load only the card

@use "@wovenui/components/card";

The card needs no other component.