Components · Data display
Card
Bordered structural containers. Four variants share an 8px radius and 1px border — only padding and border color change. No shadows at rest: elevation is reserved for overlays.
Preview
24px padding, hairline border, no shadow — the default container.
Muted surface for nested or secondary panels.
High-contrast border for major notices — one per view.
24px padding, hairline border, no shadow — the default container.
Muted surface for nested or secondary panels.
High-contrast border for major notices — one per view.
24px padding, hairline border, no shadow — the default container.
Muted surface for nested or secondary panels.
High-contrast border for major notices — one per view.
Spec
Values and token references straight from the Zetta spec.
- backgroundColor
- {colors.surface-card}
- textColor
- {colors.ink}
- borderColor
- {colors.hairline}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- padding
- {spacing.page}
- shadow
- none
- backgroundColor
- {colors.surface-card}
- textColor
- {colors.ink}
- borderColor
- {colors.hairline}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- padding
- {spacing.sm}
- shadow
- none
- backgroundColor
- {colors.surface-secondary}
- textColor
- {colors.ink}
- borderColor
- {colors.hairline}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- padding
- {spacing.md}
- shadow
- none
- backgroundColor
- {colors.surface-card}
- textColor
- {colors.ink}
- borderColor
- {colors.border-announcement}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- padding
- {spacing.page}
- shadow
- none
Build with the skill
No package to install — hand this to your AI to generate the card in your stack.
Implement the Zetta "Card" component in this project's stack using the zetta-design-md skill.
- Apply the `card` spec from the skill (variants: card, card-compact, card-secondary, card-announcement).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Variants & rules
card— standard, 24px padding.card-compact— 8px.card-secondary— muted surface, 16px.card-announcement— high-contrast border (one per view).- 5Structure uses a 1px hairline border, never a shadow. If a card must feel elevated in a specific spot, apply
var(--shadow-sm)directly — don't change the card.
Known gaps
- Interactive/clickable card, header/footer sub-regions, and a 12px padding variant are not yet specified.