.
card
shadow-1
bg-pure-white
border-mercury-grey
.
card--flat
shadow-0
bg-pure-white
border-mercury-grey
.
card--raised
shadow-4
bg-pure-white
border-mercury-grey
.
card--rounded
shadow-1
b-radius-md
bg-pure-white
border-mercury-grey
.
card--roundedSM
shadow-1
b-radius-sm
bg-pure-white
border-mercury-grey
.
card--softRound
shadow-2
b-radius-md
bg-pure-white
.
card--soft
shadow-2
b-radius-none
bg-pure-white
border-mercury-grey
.
card--soft:hover
shadow-4
b-radius-none
bg-pure-white
border-mercury-grey
.
card--shaded
shadow-0
bg-alabaster-grey
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. Label
If the card has a collapsed state, it should have a visible label.
4. List Layout
If a card is removed, the other cards in the list should adjust to fill the space.
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