The Card owns the surface, header, content and footer layout; everything you slot stays yours. Use a real heading element in the header slot so the card appears in the document outline, and tp-button in the footer for actions.
Slots
header, description and action make up the header, the default slot is the content and footer holds trailing actions or metadata. Empty sections take no space, so a content-only Card is just a padded surface.
Header action
Default density
Compact density
Restart from the initial state
Show the copyable source
Billing
Pro plan · renews on November 1, 2026
Manage
12 of 15 seats in use. Seats added mid-cycle are prorated on the next invoice.
Last invoice paid October 1
Billing
Pro plan · renews on November 1, 2026
Manage
12 of 15 seats in use. Seats added mid-cycle are prorated on the next invoice.
Last invoice paid October 1
<tp-card style="inline-size:100%;max-inline-size:28rem">
<h3 slot="header" style="margin:0">Billing</h3>
<p slot="description" style="margin:0">Pro plan · renews on November 1, 2026</p>
<tp-button slot="action" variant="outline" size="sm">Manage</tp-button>
<p style="margin:0">12 of 15 seats in use. Seats added mid-cycle are prorated on the next invoice.</p>
<span slot="footer" style="font-size:var(--tp-text-sm);color:var(--tp-muted-foreground)">Last invoice paid October 1</span>
</tp-card>
Every slot is optional. Without a header or footer, the card is a single padded surface for a short note or summary.
Content only
Default density
Compact density
Restart from the initial state
Show the copyable source
Your weekly report is ready: 18 tasks closed, 4 opened, and the Q3 launch is on track.
Your weekly report is ready: 18 tasks closed, 4 opened, and the Q3 launch is on track.
<tp-card style="inline-size:100%;max-inline-size:28rem">
<p style="margin:0">Your weekly report is ready: 18 tasks closed, 4 opened, and the Q3 launch is on track.</p>
</tp-card>
Borders and section colors
borders and section-colors are independent. Turn section colors off for one uniform fill, or borders off when the card sits on a contrasting surface. With borders="off", the outer line and dividers have zero width, not merely a transparent color.
Surface options
Default density
Compact density
Restart from the initial state
Show the copyable source
Uniform fill
Header, content and footer share the base surface.
Details
No borders
Sections are separated by fill alone.
Details
Plain
A single flat surface for dense layouts.
Details
Uniform fill
Header, content and footer share the base surface.
Details
No borders
Sections are separated by fill alone.
Details
Plain
A single flat surface for dense layouts.
Details
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--tp-space-4)">
<tp-card section-colors="off">
<h3 slot="header" style="margin:0">Uniform fill</h3>
<p style="margin:0">Header, content and footer share the base surface.</p>
<tp-button slot="footer" size="sm" variant="outline">Details</tp-button>
</tp-card>
<tp-card borders="off">
<h3 slot="header" style="margin:0">No borders</h3>
<p style="margin:0">Sections are separated by fill alone.</p>
<tp-button slot="footer" size="sm" variant="outline">Details</tp-button>
</tp-card>
<tp-card borders="off" section-colors="off">
<h3 slot="header" style="margin:0">Plain</h3>
<p style="margin:0">A single flat surface for dense layouts.</p>
<tp-button slot="footer" size="sm" variant="outline">Details</tp-button>
</tp-card>
</div>
Elevation
elevated adds a medium shadow and changes nothing else, so it combines with every border and color setting. Use it for cards that float above the page, not for every card in a grid.
Elevated
Default density
Compact density
Restart from the initial state
Show the copyable source
Storage almost full
9.2 GB of 10 GB used
Upgrade to keep syncing new files and version history.
DismissUpgrade
Storage almost full
9.2 GB of 10 GB used
Upgrade to keep syncing new files and version history.
DismissUpgrade
<tp-card elevated style="inline-size:100%;max-inline-size:22rem">
<h3 slot="header" style="margin:0">Storage almost full</h3>
<p slot="description" style="margin:0">9.2 GB of 10 GB used</p>
<p style="margin:0">Upgrade to keep syncing new files and version history.</p>
<tp-button slot="footer" variant="ghost" size="sm">Dismiss</tp-button>
<tp-button slot="footer" size="sm">Upgrade</tp-button>
</tp-card>
Sizes
size="sm" tightens section padding for sidebars, dashboards and nested content.
Small
Default density
Compact density
Restart from the initial state
Show the copyable source
Monthly active users
48,210
+6.4% from September
Monthly active users
48,210
+6.4% from September
<tp-card size="sm" style="inline-size:100%;max-inline-size:18rem">
<h3 slot="header" style="margin:0">Monthly active users</h3>
<p style="margin:0;font-size:var(--tp-text-2xl);font-weight:var(--tp-font-semibold)">48,210</p>
<span slot="footer" style="font-size:var(--tp-text-sm);color:var(--tp-muted-foreground)">+6.4% from September</span>
</tp-card>
Card has no whole-card click target. When a card should navigate, put a link on its heading or a Button in its footer so the interactive element has its own name and focus.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionelevatedelevatedbooleanfalseAdds a shadow, and changes nothing else, for a card that floats above the page.bordersborders'on' | 'off''on'Shows or removes the outline and the section dividers together.section-colorssectionColors'on' | 'off''on'Gives the header, content and footer their own fills, or one shared fill when off.sizesize'sm' | 'default''default'The section padding; sm suits sidebars, dashboards and nested cards.
Slots
SlotDescriptionheaderThe title, ideally a heading element so the card joins the document outline.descriptionSupporting text under the title.actionA control at the end of the header, such as a Button that manages the card's subject.defaultThe content.footerActions or metadata after the content, in reading order from the start.
CSS parts
PartDescription::part(card)The surface: fill, outline, corners and elevation.::part(card-action)The wrapper of the action slot, at the end of the header.::part(card-content)The content section around the default slot.::part(card-description)The wrapper of the description slot, in muted text.::part(card-footer)The footer section around the footer slot.::part(card-header)The header section around the title, the description and the action.::part(card-title)The wrapper of the header slot.
Related
Components, widgets and patterns that use this one.