Skip to content
Theme UI
GitHub

Card

import { Card } from 'theme-ui'

Variants

Card style variants can be defined in the theme.cards object. By default the Card component uses the theme.cards.primary variant.

// example theme variants
{
cards: {
primary: {
padding: 2,
borderRadius: 4,
boxShadow: '0 0 8px rgba(0, 0, 0, 0.125)',
},
compact: {
padding: 1,
borderRadius: 2,
border: '1px solid',
borderColor: 'muted',
},
},
}
Edit the page on GitHub
Previous:
Button
Next:
Checkbox