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.
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
The CSS class being referred to.
A description of what the class does.
Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
The selector that the class name is allowed to be used on.
The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.