cards

About Cards

To initialize a card, apply the slds-card class to an <article> element.

Accessibility

Cards should use an underlying <article> element to maintain usability for some screen reader users.

Mobile

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, cards will have bolded header title text, no top border, and no rounded corners.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in the appropriate context. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Base Card Structure

A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Header

The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With no header

The card header can be removed from the HTML to prevent the card header from displaying.

<article class="slds-card">
  <div class="slds-card__body slds-card__body_inner">Anything can go into the card body</div>
  <footer class="slds-card__footer">

Alternatively, the card header can be visually hidden but still accessible to screen readers by applying slds-assistive-text to the slds-card__header element.

<article class="slds-card">
  <div class="slds-card__header slds-grid slds-assistive-text">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Actions row

The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead.

Single action

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Multiple actions

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Body

The card body accommodates any layout or design, as long as its a grouping of related information.

Styling Note

By default, the body of a card does not have padding. Components inside the card will be flush to the left and right edges of the card. If you need to add padding, use the slds-card__body_inner class on the slds-card__body element.

Default without padding

For an example of when to use the default behavior, see the Data Table example.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With padding

For an example of when to use the slds-card__body_inner class, see the Tiles example.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Footer

The card footer is optional and should only have a "View All" link that takes a user to the object list view.

Accessibility Note

When present, the footer includes hidden assistive text to give screen reader users context about which entity they will be viewing.

Implementation Note

The examples in this documentation use the slds-card__footer-action class on the footer link <a> to force the footer's click target to span the entire width of the card. Simply remove this class if not needed.

With no footer

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With a footer

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Examples

Empty

When a card doesn't have any data, it is represented with the body and footer collapsed by default.

Collapsed

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With Illustration

Alternatively, a card can be represented with no data by using an illustration in the card body.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Loading

When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With a Data Table

Placing a data table inside of an slds-card__body is an example of when to utilize the default behavior of a card body, since no padding is applied.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With Tiles

Placing contact tiles inside of an slds-card__body is an example of using slds-card__body_inner to apply additional padding to the card body content.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Mobile context changes

Please be aware that in a mobile context cards with tiles will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.

Layout

Nested Cards

When a card is located inside of another card body, we remove the drop shadow and border of the nested cards. You can opt into adding the border back by applying slds-card_boundary to the slds-card element.

No styling

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With card styling

Adding slds-card_boundary to the slds-card element will give you back the card styling.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Wrapped Cards

To combine several cards into a single card look, wrap the cards using slds-card-wrapper. Similar to the nested cards, adding slds-card_boundary to the slds-card element will give you back the card styling.

<div class="slds-card-wrapper">
  <article class="slds-card">
    <div class="slds-card__header slds-grid">

Einstein Theming

For cards that contain Einstein related information, you can include an Einstein themed card header.

<article class="slds-card">
  <div class="slds-grid slds-einstein-header slds-card__header">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With an Icon

<article class="slds-card">
  <div class="slds-grid slds-einstein-header slds-card__header">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

With Actions

<article class="slds-card">
  <div class="slds-grid slds-einstein-header slds-card__header">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">

Mobile context changes

Please be aware that in a mobile context cards with Einstein theming and actions will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.