Back to Style Guide

Cards

Card container components with multiple variants and padding options.

Card Variants

Default Card

Subtle background color.

Classes: card card-default card-padding-md

Outlined Card

Transparent with border.

Classes: card card-outlined card-padding-md

Elevated Card

Raised with shadow.

Classes: card card-elevated card-padding-md

Padding Sizes

Small Padding

card-padding-sm

Medium Padding

card-padding-md

Large Padding

card-padding-lg

Card with Header and Footer

Card Title

Optional subtitle goes here

This is the main content of the card. It can contain any content you need.

Sub-components: card-header, card-title, card-subtitle, card-body, card-footer