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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
    <a class="slds-card__footer-action" href="javascript:void(0);">View All

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">
      <div class="slds-media__body">

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">
      <div class="slds-media__figure">

Multiple actions#

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

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <div class="slds-media__figure">

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">
      <header class="slds-media slds-media_center slds-has-flexi-truncate">

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">
      <div class="slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3">

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">
      <div class="slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3">

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">
      <div class="slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3">

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.