elements
Manual UI Templates Card

Card

elements man ui/templates/card

A surface with a header, body and footer, built on the base card styles.

Example
import {
  Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter,
} from "@elements/ui/card";
import { Button } from "@elements/ui/button";

<Card title="Login to your account" description="Enter your email below to login.">
  <CardAction slot="action"><Button variant="link">Sign up</Button></CardAction>
  <CardContent>...</CardContent>
  <CardFooter align="stack">
    <Button variant="primary">Login</Button>
  </CardFooter>
</Card>

Parts

Part What it is
CardHeader .card-head: title and description, with the action at the top right.
CardTitle .card-title, role=heading with aria-level.
CardDescription .card-description, helper text.
CardAction .card-action, top right of the header.
CardContent .card-body, the padded body.
CardFooter .card-foot, actions on a tinted strip.
.card-bleed Content that runs edge to edge inside the body.
--card-spacing The padding every part uses. Set it on the card to change them all.

Attributes

Card

Attribute Type Default Description
title string "" Renders a header with a title.
description string "" Renders a description in that header.
size "md" | "sm" "md" sm pads with the theme's small surface padding.
level 1 | 2 | 3 | 4 | 5 | 6 3 Heading level of the title.
class string "" Extra classes on the surface.
attrs Record<string, string | number | boolean | undefined> {} Other attributes: id, style (set --card-spacing), aria-*.

CardTitle

Attribute Type Default Description
level 1 | 2 | 3 | 4 | 5 | 6 3 aria-level of the heading.

CardFooter

Attribute Type Default Description
align "end" | "start" | "stack" "end" Where the footer's actions sit; stack is full-width buttons in a column.

every part

Attribute Type Default Description
class string "" Extra classes.

Slots

Slot Part Content
default Card The parts, an image, anything.
action Card The header action when the header comes from title.
default each part The part's content.

Data attributes

Attribute Values On
data-size "md" | "sm" root
data-slot "card" | "card-header" | "card-title" | "card-description" | "card-action" | "card-content" | "card-footer" every part

Accessibility

  • The title is role="heading" with aria-level (3 by default), so the outline is right whatever size the theme draws it.
  • The card itself is a div. Put it in an <article> or a labelled <section> when it is a landmark.

See also