card

Container with header, content, footer zones.

status: stable js: none support: baseline

Preview

…

Markup

<div class="card"><div class="card-header"><div class="card-title">T</div><div class="card-description">D</div></div><div class="card-content">…</div><div class="card-footer" data-justify="end">…</div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/card.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add card

Accessibility

Use a heading for card-title; card-action slot is top-right

Classes

.card .card-header .card-title .card-description .card-action .card-content .card-footer .card-interactive

Dependencies

base/tokens