Card

A card that contains three optional slots; a header, a body and a footer.

Information

Plan: Personal

Properties

Property	Type	Default
Width	string	"auto"
Minimum width	string	"0px"
Maximum width	string	"none"
Height	string	"auto"
Minimum height	string	"0px"
Maximum height	string	"none"
Overflow	enum<string>	"visible"
Overflow X	string	"visible"
Overflow Y	string	"visible"
Aspect ratio	string	"auto"
Flexbox direction	enum<string>	"column"
Align items	enum<string>	"stretch"
Justify content	enum<string>	"stretch"
Flexbox grow	string	"1"
Element	enum<string>	"div"
Position	enum<string>	"relative"
Top	string	"auto"
Right	string	"auto"
Bottom	string	"auto"
Left	string	"auto"
Z-index	string	"auto"
Transform	string	"none"
Transform origin	string	"center"
Text align	enum<string>	"left"
Width - Header	string	"auto"
Height - Header	string	"auto"
Flexbox direction - Header	enum<string>	"row"
Align items - Header	enum<string>	"center"
Justify content - Header	enum<string>	"stretch"
Flexbox grow - Header	string	"0"
Gap - Header	string	"1rem"
Padding - Header	string	"2rem"
Width - Body	string	"auto"
Height - Body	string	"auto"
Flexbox direction - Body	enum<string>	"column"
Align items - Body	enum<string>	"stretch"
Justify content - Body	enum<string>	"stretch"
Flexbox grow - Body	string	"1"
Gap - Body	string	"1rem"
Padding - Body	string	"2rem"
Width - Footer	string	"auto"
Height - Footer	string	"auto"
Flexbox direction - Footer	enum<string>	"row"
Align items - Footer	enum<string>	"center"
Justify content - Footer	enum<string>	"stretch"
Flexbox grow - Footer	string	"0"
Gap - Footer	string	"1rem"
Padding - Footer	string	"2rem"
Padding - Before	string	"0px"
Inset	string	"0"
Background	string	"none"
Background color	string	"var(--pc-semantic-surface-base)"
Background color - Hover	string	"var(--pc-semantic-surface-base)"
Color	string	"var(--pc-semantic-text-primary)"
Color - Hover	string	"var(--pc-semantic-text-primary)"
Cursor	string	"auto"
Background image	string	"none"
Background size	string	"auto"
Background position	string	"center"
Background repeat	string	"repeat"
Background blend mode	string	"normal"
Background color - Header	string	"var(--pc-semantic-surface-base)"
Background color - Header - Hover	string	"var(--pc-semantic-surface-base)"
Background color - Body	string	"var(--pc-semantic-surface-base)"
Background color - Body - Hover	string	"var(--pc-semantic-surface-base)"
Background color - Footer	string	"var(--pc-semantic-surface-base)"
Background color - Footer - Hover	string	"var(--pc-semantic-surface-base)"
Border width	string	"1px"
Border top width	string	"1px"
Border right width	string	"1px"
Border bottom width	string	"1px"
Border left width	string	"1px"
Border color	string	"var(--pc-semantic-border-default)"
Border color - Hover	string	"var(--pc-semantic-border-default)"
Border radius	string	"14px"
Outline	string	"none"
Outline offset	string	"0"
Box shadow	string	"var(--pc-semantic-shadow-sm)"
Box shadow - Hover	string	"var(--pc-semantic-shadow-sm)"
Transform - Hover	string	"none"
Transition	string	"none"
Opacity	string	"1"
Filter	string	"none"
Backdrop filter	string	"none"
Background - Before	string	"none"
Mask - Before	string	"none"
Mask composite - Before	string	"add"
Is visible	boolean	true
Selectors	array	[]

Variants

Variant	Description
Flat	Coming soon...
Outlined	Coming soon...
Elevated	Coming soon...
Soft	Coming soon...
Glass	Coming soon...
Dark	Coming soon...
Compact	Coming soon...
Spacious	Coming soon...
Horizontal	Coming soon...
Centered	Coming soon...
Image Card	Coming soon...
Dashboard Tile	Coming soon...
Clickable	Coming soon...
Accent Left	Coming soon...
Accent Top	Coming soon...
Modal	Coming soon...
Floating Panel	Coming soon...
Scrollable	Coming soon...
Media Overlay	Coming soon...