You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Structure
Card
Structure
Card
Cards are containers that group related content together. Cards can have multiple sections, such as headers and footers. It also supports some visual variations to adjust its hierarchy on the page.
Basic Card
The most basic implementation of a card takes up the entire room available on the page. This is useful for dividing content on the page into easy to digest sections or calling attention to a specific grouping of content.
<Card>Basic Card</Card>
Stack of Cards
Cards can easily be paired with the Stack to produce columns of Cards.
<StackjustifyContent="space-between">
<Card>Basic Card</Card>
<Card>Basic Card</Card>
<Card>Basic Card</Card>
<Card>Basic Card</Card>
</Stack>
Card Shape Variations
Cards can be modified to suit the needs of the page by adding one or more variations. These variations can be mixed together to make the Card fit the layout.
Elevations
Default
<Card>Flat Card</Card>
Raised
Adds a shadow, bringing prominence to a particular Card.
<Cardelevation="raised">Raised Card</Card>
Removes Border
Use to de-emphasize content relative to other Cards.
<Cardelevation="base">Base Card</Card>
Sharper Edges
By default, Cards have a rounded style. Sharper edges can also be applied, generally when a Card is nested in another Card to keep corners smooth.
<Cardsharp>Sharp Card</Card>
Padding
Cards can have three different padding options: default, thin, and none.
Thin Cards
The space inside a Card section can be decreased, which is useful in denser page layouts.
<Cardpadding="thin">Thin Card</Card>
No Padding Cards
Useful when content inside needs to line up with external content, or to heavily customize inner Card content.
Shows that the content has been currently selected or enabled.
<Cardstatus="active">Active Card</Card>
Error
Used to visually indicate that something is wrong with content inside. In general, error styling should be applied directly to content inside the Card, and only to the Card itself when it is directly an interactive piece. See the Togglebox as a practical example.
<Cardstatus="error">Error Card</Card>
Placeholder Cards
Cards can be used to provide the user a clear indication of how to add content and how that content will affect the layout.
Cards have a hover state automatically by adding an onClick prop. The hover state transitions the card to the next highest elevation as a click affordance. You can also set hoverable on the card. The active prop gives the card a blue outline indicating it has been selected.
Card Sections can be used to divide cards into multiple sections. Card Sections can have different background colors to divide a card header from the body of the card, or add a call to action button
By default, the Card content is automatically wrapped with a Card.Section. If you manually include Card.Sections in the card, those will be used instead.