Card
A padded block with a background, a shadow and optional header and footer bands.
Add .card to any block element, usually an article.
A direct header or footer becomes a tinted band.
Pro plan
Unlimited projects, priority support and early access to new components.
Body only
A card without bands is a padded block, like a box.
Outlined
.outlined swaps the background and shadow for a border, and makes the bands transparent.
A quiet card for secondary content.
Sizes
.small, .medium and .large change the padding.
Small
Default
Medium
Large
Rounded and square
Rounded
Square
Card grid
Put cards in a .grid for equal columns that wrap.
Free
3 projects
Pro
Unlimited projects
Team
Shared workspaces
In a modal
A modal dialog is always a card, with no class.
Variables
| Variable | Default |
|---|---|
--i-card-section-padding-scaleHeader and footer padding, relative to the card padding | 0.66 |
--i-card-color-background | light-dark(var(--i-color-background), #181c25) |
--i-card-color-border | light-dark(var(--i-color-subtle-border), var(--i-card-color-background)) |
--i-card-section-color-background | light-dark(#fbfcfd, #1a1f28) |
--i-card-shadow | var(--i-shadow) |