Card

0.6.0-alpha.7

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

import { Card } from 'theme-ui';

Card

({ maxWidth, src, text }) => (
  <Card sx={{ maxWidth, bg: 'background' }}>
    <Image src={src} />
    <Text>{text}</Text>
  </Card>
)

Name	Description	Default
maxWidth	number	252
src	text	https://picsum.photos/id/1084/128/128
text	text	Card

	Name	Description	Default
BoxOwnProps (4 properties)

	as	ElementType<any>	-
	variant	string	-
	css	Interpolation<any>	-
	sx	ThemeUIStyleObject	-
SpaceProps (28 properties)
HTMLAttributes (44 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)