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.
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.
Cards can easily be paired with the Stack to produce columns of Cards.
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.
Adds a shadow, bringing prominence to a particular Card.
Use to de-emphasize content relative to other Cards.
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.
Cards can have three different padding options: default, thin, and none.
The space inside a Card section can be decreased, which is useful in denser page layouts.
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.