Cards

cards

.slds-card, .slds-card-wrapper — Cards are used to apply a container around a related grouping of information.

base

.slds-card — Initializes card

base › With data-table

base › With tiles

base › Nested cards

base › With no header

base › Visibly hidden card header

base › Body with no padding

base › Body with padding

base › No footer

base › Has footer

base › Nested with no boundary

base › Nested with boundary

base › With long truncated title

base › Styling Hooks

.slds-card_boundary

.slds-card_boundary — Used to bring back the border on a card when needed

.slds-card__header

.slds-card__header — Initializes card header

.slds-card__header-title

.slds-card__header-title — Title element within card header

.slds-card__header-link

.slds-card__header-link — Actionable element within the card header title

einstein

.slds-einstein-header — Einstein themed card header

.slds-einstein-header__figure

.slds-einstein-header__figure — Einstein themed card header figure

.slds-einstein-header__actions

.slds-einstein-header__actions — Einstein themed card header actions

.slds-card__body

.slds-card__body — Initializes card body

.slds-card__body_inner

.slds-card__body_inner — Apply the same spacing found on the card header to the card body

.slds-card__footer

.slds-card__footer — Initializes card footer

.slds-card__footer-action

.slds-card__footer-action — Actionable element within card footer

wrapper

.slds-card-wrapper — Removes the card look from nested cards and pulls them to the boundary of the card wrapper, making the nested cards look like they are inside of one card

wrapper › Card wrapper for tabs

wrapper › Styling Hooks