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

card

card

shadow-1

bg-pure-white

border-mercury-grey

.

card--flat

card--flat

card--flat

shadow-0

bg-pure-white

border-mercury-grey

.

card--raised

card--raised

card--raised

shadow-4

bg-pure-white

border-mercury-grey

.

card--rounded

card--rounded

card--rounded

shadow-1

b-radius-md

bg-pure-white

border-mercury-grey

.

card--roundedSM

card--roundedSM

card--roundedSM

shadow-1

b-radius-sm

bg-pure-white

border-mercury-grey

.

card--softRound

card--softRound

card--softRound

shadow-2

b-radius-md

bg-pure-white

.

card--soft

card--soft

card--soft

shadow-2

b-radius-none

bg-pure-white

border-mercury-grey

.

card--soft:hover

card--soft:hover

card--soft:hover

shadow-4

b-radius-none

bg-pure-white

border-mercury-grey

.

card--shaded

card--shaded

card--shaded

shadow-0

bg-alabaster-grey

Best Practices

Best Practices

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. 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.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies