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