On this page
Proposed CSC Standards · 0.1.0
Cards
A surface that groups a title, value, and actions.
Group related content. A card is not a button.
What this describes
When to use
- A summary the person scans.
- A statistic with a label.
- A section that needs a border or elevation.
When not to use
- The whole card is the only click target for navigation. Put a link on the title.
- A data set of many rows. Use DataTable.
Allowed variants
Default
A bordered group.
- Hierarchy
- Standard surface.
- Use in
- Page sections.
- Restriction
- Not a click target by itself.
- Accessibility
- Heading inside names the group.
- Responsive
- Full width of the column.
Outlined
A flat border.
- Hierarchy
- No shadow.
- Use in
- Dense pages.
- Restriction
- Border meets 3:1 if it is the only edge.
- Accessibility
- Same as default.
- Responsive
- Stacks in a one-column grid under 760px.
Elevated
A card that sits above the page.
- Hierarchy
- Shadow.
- Use in
- Featured summaries.
- Restriction
- Do not elevate every card.
- Accessibility
- Shadow is not the only separator. Keep a border or spacing.
- Responsive
- Shadow must not cause overflow.
Accent
A card tied to the CSC blue surface.
- Hierarchy
- Tinted border.
- Use in
- One featured card.
- Restriction
- Do not use accent to mean error.
- Accessibility
- Text on the tint still meets 4.5:1.
- Responsive
- Same stacking as other cards.
Statistic
A label plus a number.
- Hierarchy
- Metric.
- Use in
- Dashboards.
- Restriction
- Always include the title.
- Accessibility
- Title and value are text.
- Responsive
- The metric row becomes one column under 760px.
Mandatory rules
Do not make the entire card a button
If a card contains two actions, the card itself is not one click target.
Implementation detail
Proposed CSC Standard. A card-sized button swallows nested links and fails the nested interactive content rule.
Use Card as a container. Put Button or a link inside it.
Check: The card element is not a button and does not have an onClick that duplicates an inner control.
Give a statistic a text label
StatCard shows a title and a value. The value is not color alone.
Implementation detail
A number without a label is meaningless to a screen reader and to someone who cannot see the caption.
Show a text label and a text value. Do not use color as the only meaning.
Check: The title and value are both text in the card.
Use elevation only to separate surfaces
Elevated, outlined, and accent are visual containers, not status colors.
Implementation detail
Proposed CSC Standard. Status belongs on Badge.
Pick one card variant per region. Put status in Badge.
Check: Status is a badge with a word, not a card border color.
Restrictions
- CRD-001 Do not make the entire card a button. If a card contains two actions, the card itself is not one click target.
Accessibility
- The card is a container.
- Statistics have text labels.
Responsive behavior
- Card grids use a single column under 760px.
- Padding stays inside the viewport.
Component states
Default
Static surface.
With actions
Buttons inside the card, not on the card element.
Correct implementation
The title and the value are both visible text on a white card.
Imports: None. Dependencies: None. Rules: CRD-002.
export function OpenCases() {
return (
<article style={{ border: '1px solid #E7EBF2', borderRadius: 11, padding: 18, background: '#fff' }}>
<small>Open applications</small>
<strong style={{ fontSize: 24 }}>128</strong>
</article>
);
}Incorrect implementation
A div with onClick cannot contain another button and has no link semantics.
Imports: None. Dependencies: None. Rules: CRD-001.
export function ClickableCard() {
return <div onClick={() => {}}>Open applications</div>;
}Common mistakes
- Clickable card divs with nested buttons.
- A metric with no caption.
- Red border used as the only error signal.
Testing checklist
Agent prompts for this component are in the AI Development Hub.