Ready
Cards
Cards styles are used to group related content, data, links and actions. Cards are placed within the page content.
Styles
.card--filled
--
shadow-0
--
.border-radius-2
.card--clickable:hover
--
shadow-4
--
.border-radius-2
.card--clickable
--
shadow-2
--
.border-radius-2
.card--popover
--
shadow-4
--
.border-radius-2
.card
--
shadow-1
--
.border-radius-2
.card--subtle
--
shadow-0
--
.border-radius-2
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