Team plan
Active12 of 20 seats used. Renews on 1 March.
StableComponent · since 0.1.0
A raised surface that groups related content, such as a summary, a settings group or a list item.
Pick this part
Pick c-card for
- A collection of similar items people browse and open one at a time: projects, articles, plans.
- A dashboard summary that groups a figure with its actions.
- A group of related settings.
Build it
- Start with
<article>and addclass="c-card". - Add the parts you need:
c-card__header,c-card__title,c-card__body,c-card__footer. - Pick at most one surface modifier:
--elevated,--bordered. - Add any behavior modifier:
--interactive.
Team plan
Active12 of 20 seats used. Renews on 1 March.
Updated 2 hours ago
Invoices go to finance@example.com on the 1st of each month.
Show markup 33 lines
<div class="l-grid l-grid--responsive">
<article class="c-card">
<header class="c-card__header">
<div class="l-cluster">
<h3 class="c-card__title">Team plan</h3>
<span class="c-badge c-badge--success">Active</span>
</div>
</header>
<div class="c-card__body">
<p class="u-margin-0">12 of 20 seats used. Renews on 1 March.</p>
</div>
<footer class="c-card__footer">
<div class="l-cluster">
<button type="button" class="c-button c-button--sm">Manage seats</button>
</div>
</footer>
</article>
<article class="c-card c-card--interactive">
<div class="c-card__header">
<h3 class="c-card__title"><a href="/projects/atlas">Atlas</a></h3>
</div>
<div class="c-card__body">
<p class="u-margin-0">Updated 2 hours ago</p>
</div>
</article>
<section class="c-card c-card--bordered">
<div class="c-card__body">
<p class="u-margin-0">Invoices go to finance@example.com on the 1st of each month.</p>
</div>
</section>
</div>Check your build
Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.
Fits
Put the link on the title and add c-card--interactive; the link covers the card and other actions stay clickable.
Updated 2 hours ago
Show markup 8 lines
<article class="c-card c-card--interactive">
<div class="c-card__header">
<h3 class="c-card__title"><a href="#atlas">Atlas</a></h3>
</div>
<div class="c-card__body">
<p class="u-margin-0">Updated 2 hours ago</p>
</div>
</article>validate: 0 issues
Doesn't fit
Don't wrap the whole card in a link: screen readers read the entire card as one long link name.
<a class="c-card c-card--interactive" href="#atlas">
<h3 class="c-card__title">Atlas</h3>
<p class="u-margin-0">Updated 2 hours ago</p>
</a>validate
- warning Don't wrap a card in a link. Add c-card--interactive and put the link on the c-card__title; its hit area covers the card.
[card-link]
Fits
Let the grid space the cards.
Storage: 4 GB of 10 GB
Seats: 12 of 20
Show markup 4 lines
<div class="l-grid l-grid--responsive">
<section class="c-card c-card--bordered"><p class="u-margin-0">Storage: 4 GB of 10 GB</p></section>
<section class="c-card c-card--bordered"><p class="u-margin-0">Seats: 12 of 20</p></section>
</div>validate: 0 issues
Doesn't fit
Don't space cards with their own margin.
<section class="c-card" style="margin-block-end: 16px"><p class="u-margin-0">Storage: 4 GB of 10 GB</p></section>validate
- warning Components must not set their own margin. Wrap them in a layout primitive (l-stack, l-cluster…) instead.
[golden-rule]
Fits
Group content inside a card with headings and l-stack.
Billing
Team plan, 12 of 20 seats.
Next invoice on 1 November 2026.
Show markup 7 lines
<article class="c-card">
<h3 class="c-card__title">Billing</h3>
<div class="c-card__body l-stack l-stack--sm">
<p class="u-margin-0">Team plan, 12 of 20 seats.</p>
<p class="u-margin-0">Next invoice on 1 November 2026.</p>
</div>
</article>validate: 0 issues
Doesn't fit
Don't put a card inside a card: the nested keylines read as clutter and flatten the hierarchy.
<article class="c-card">
<h3 class="c-card__title">Billing</h3>
<div class="c-card">
<p>Team plan, 12 of 20 seats.</p>
</div>
</article>validate
- warning A card inside a card. Group the inner content with a heading and l-stack, or use a list; nested keylines read as clutter.
[card-nesting]
Spec sheet
Apply to <article> <section> <div> <li> <a>
| Class | Group | What it does |
|---|---|---|
c-card--elevated | surface (pick one) | Stronger shadow to lift the card above its neighbors. |
c-card--bordered | surface (pick one) | Keyline only, no brick edge; for flat, dense layouts. |
c-card--interactive | behavior | The whole card is clickable; shows hover feedback. |
| Class | On | What it does |
|---|---|---|
c-card__header | <header> <div> | Top area; holds the title and optional badges. |
c-card__title | <h2> <h3> <h4> <h5> <h6> | Card heading. Use the heading level that fits the page outline. |
c-card__body | <div> <p> | Main content. |
c-card__footer | <footer> <div> | Bottom area for actions or metadata; has a top divider. |
Show tokens 7
| Token | Value (light / dark) |
|---|---|
--card-background | #ffffff / #14294d |
--card-border | #1a1d20 / #cfdae5 |
--card-border-hover | #005a9c / #2576cc |
--card-radius | 0.5rem |
--card-padding | 1.5rem |
--card-shadow | 0 2px 0 #1a1d20, 0 3px 8px rgb(26 29 32 / 0.12) / 0 2px 0 rgb(207 218 229 / 0.45), 0 4px 10px rgb(0 0 0 / 0.35) |
--card-shadow-elevated | 0 2px 0 #1a1d20, 0 10px 24px -4px rgb(26 29 32 / 0.22) / 0 2px 0 rgb(207 218 229 / 0.5), 0 12px 28px -4px rgb(0 0 0 / 0.6) |
Accessibility
- An interactive card must be reachable with the keyboard: use a real
<a>or<button>, never a click handler on a<div>. - Keep the title a real heading so screen reader users can navigate by headings.
| Key | What it does |
|---|---|
| Tab | Focuses the title link (the card shows the focus ring), then any other actions in the card. |
Wording
- The title names the thing, not the action: "Atlas", not "View Atlas".
- Keep the body to one or two lines of summary; details belong on the page the card opens.