Ready
Cards
Cards styles are used to group related content, data, links and actions. Cards are placed within the page content.
Styles
.card--shaded
--
shadow-0
.card--soft:hover
--
shadow-4
.card--soft
--
shadow-2
.card--softRound
--
shadow-2
.card--roundedSM
--
shadow-1
.card--rounded
--
shadow-1
.card--raised
--
shadow-4
.card
--
shadow-1
.card--flat
--
shadow-0
Best Practices
Content
Cards should only contain content related to a single subject.
Navigation
When used for navigation, cards should only contain a single link to the next page in the work flow.
Layout
If a card is removed, the other cards in the list should adjust to fill the space.
More
Related Pages
Additional Reading
Cards: UI-Component Definition https://www.nngroup.com/articles/cards-component/
Best practices for designing cards https://uxplanet.org/best-practices-for-designing-cards-a19f53cab052
Design Better Cards https://uxdesign.cc/design-better-cards-c0d12ab581c4
Law of Common Region https://lawsofux.com/law-of-common-region.html