Cards

Cards

Cards are used to apply a container around a related grouping of information.

Base

Preview

About Base

The base card is used primarily on desktop within a “wide” column or “main content area”, which uses two-thirds of the viewport. In addition, the .slds-card class is used for layout purposes when a card has an adjacent card, those proceeding the initial will provide margin to give the cards spacing between each other.


About Cards

To initialize a card, apply the .slds-card class to a containing <article>. A card is made up of three sections, a header, a body, and a footer. The card header will get the .slds-card__header class. The card body will get the .slds-card__body class. The card footer will get the .slds-card__footer class.


Overview of CSS Classes

Selector.slds-card
Summary

Initializes card

Restrictarticle, div
VariantTrue
Selector.slds-card__header
Summary

Initializes card header

Restrict.slds-card div
Selector.slds-card__body
Summary

Initializes card body

Restrict.slds-card div
Selector.slds-card__footer
Summary

Initializes card footer

Restrict.slds-card footer
Selector.slds-card
Summary

Card that contains insights of Einstein

Restrictarticle, div
VariantTrue
Selector.slds-card__header
Summary

Initializes card header

Restrict.slds-card div
Selector.slds-card__body
Summary

Initializes card body

Restrict.slds-card div
Selector.slds-card__footer
Summary

Initializes card footer

Restrict.slds-card footer

No content has been added for this component.

No content has been added for this component.