Card

Colored cards using <article> with optional header and footer.

← Back to examples

All 11 color variants

Primary
Card body with primary accent.
Card footer
Secondary
Card body with secondary accent.
Card footer
Tertiary
Card body with tertiary accent.
Card footer
Contrast
Card body with contrast accent.
Card footer
Success
Card body with success accent.
Card footer
Info
Card body with info accent.
Card footer
Warning
Card body with warning accent.
Card footer
Error
Card body with error accent.
Card footer
Accent
Card body with accent accent.
Card footer
Pop
Card body with pop accent.
Card footer
Spark
Card body with spark accent.
Card footer

Body only

A simple card with content only, no header or footer.

Default card (no color)

Standard card
This card uses the default <article> styling without any color class.