Cards

Cards

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

Base

Preview

No content has been added for this component.

No content has been added for this component.

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