Ready
Cards
Cards styles are used to group related content, data, links and actions. Cards are placed within the page content.
Styles
.
card
bg-color-default
border-color-default
--
shadow-1
.
card--flat
bg-color-default
border-color-default
--
shadow-0
.
card--raised
bg-color-default
border-color-default
--
shadow-4
.
card--rounded
bg-color-default
border-color-default
border-radius-2
--
shadow-1
.
card--roundedSM
bg-color-default
border-color-default
border-radius-1
--
shadow-1
.
card--softRound
bg-color-default
border-radius-2
--
shadow-2
.
card--soft
bg-color-default
border-color-default
--
shadow-2
.
card--soft:hover
bg-color-default
border-color-default
--
shadow-4
.
card--shaded
bg-color-backdrop
--
shadow-0
Best Practices
1
.
Content
Cards should only contain content related to a single subject.
2
.
Navigation
When used for navigation, cards should only contain a single link to the next page in the work flow.
3
.
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