Components

Cards

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

BaseBase › DefaultBase › EmptyBasedev ready

Preview

Code

<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">
        <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
          <svg class="slds-icon slds-icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
            <span class="slds-text-heading--small">Card Header</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body">Card Body (custom goes in here)</div>
  <div class="slds-card__footer">Card Footer</div>
</article>

The base card is used primarily on desktop within a “wide” column or “main content area”, which uses two-thirds of the viewport.

Base NarrowBase Narrow › DefaultBase Narrow › EmptyBase Narrowdev ready

Preview

Code

<article class="slds-card slds-card--narrow">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
          <svg class="slds-icon slds-icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
            <span class="slds-text-heading--small">Card Header</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options</span>
      </button>
    </div>
  </div>
  <div class="slds-card__body">Card Body (custom goes in here)</div>
  <div class="slds-card__footer">Card Footer</div>
</article>

The narrow card is used primarily on desktop within a “narrow” column or “sidebar”, which takes up the remaining one-third of the viewport, with a minimum width of 400px to maintain readability.

Related List With TilesRelated List With Tilesdev ready

Preview

Code

<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">
        <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
          <svg class="slds-icon slds-icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
            <span class="slds-text-heading--small">Contacts (3)</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body">
    <div class="slds-card__body--inner slds-grid slds-wrap slds-grid--pull-padded">
      <div class="slds-tile slds-media slds-card__tile slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-3 slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-icon_container slds-icon-standard-contact" title="if needed">
            <svg class="slds-icon slds-icon--small" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
            </svg>
            <span class="slds-assistive-text">Contact</span>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
            <div class="slds-shrink-none">
              <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More options">
                <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More options</span>
              </button>
            </div>
          </div>
          <div class="slds-tile__detail slds-text-body--small">
            <dl class="slds-list--horizontal slds-wrap">
              <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
              <dd class="slds-item--detail slds-truncate">Description for first label</dd>
              <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
              <dd class="slds-item--detail slds-truncate">Description for second label</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="slds-tile slds-media slds-card__tile slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-3 slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-icon_container slds-icon-standard-contact" title="if needed">
            <svg class="slds-icon slds-icon--small" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
            </svg>
            <span class="slds-assistive-text">Contact</span>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
            <div class="slds-shrink-none">
              <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More options">
                <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More options</span>
              </button>
            </div>
          </div>
          <div class="slds-tile__detail slds-text-body--small">
            <dl class="slds-list--horizontal slds-wrap">
              <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
              <dd class="slds-item--detail slds-truncate">Description for first label</dd>
              <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
              <dd class="slds-item--detail slds-truncate">Description for second label</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="slds-tile slds-media slds-card__tile slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-3 slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-icon_container slds-icon-standard-contact" title="if needed">
            <svg class="slds-icon slds-icon--small" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
            </svg>
            <span class="slds-assistive-text">Contact</span>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
            <div class="slds-shrink-none">
              <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More options">
                <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More options</span>
              </button>
            </div>
          </div>
          <div class="slds-tile__detail slds-text-body--small">
            <dl class="slds-list--horizontal slds-wrap">
              <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
              <dd class="slds-item--detail slds-truncate">Description for first label</dd>
              <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
              <dd class="slds-item--detail slds-truncate">Description for second label</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-card__footer"><a href="javascript:void(0);">View All <span class="slds-assistive-text">entity type</span></a></div>
</article>

Related List With TableRelated List With Tabledev ready

Preview

Code

<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">
        <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
          <svg class="slds-icon slds-icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
            <span class="slds-text-heading--small">Contacts (1)</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body">
    <table class="slds-table slds-table--bordered slds-no-row-hover slds-table--cell-buffer">
      <thead>
        <tr class="slds-text-title--caps">
          <th scope="col">
            <div class="slds-truncate" title="Name">Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Company">Company</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Title">Title</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Email">Email</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="slds-hint-parent">
          <th scope="row">
            <div class="slds-truncate" title="Adam Choi"><a href="javascript:void(0);">Adam Choi</a></div>
          </th>
          <td>
            <div class="slds-truncate" title="Company One">Company One</div>
          </td>
          <td>
            <div class="slds-truncate" title="Director of Operations">Director of Operations</div>
          </td>
          <td>
            <div class="slds-truncate" title="adam@company.com">adam@company.com</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="slds-card__footer"><a href="javascript:void(0);">View All <span class="slds-assistive-text">entity type</span></a></div>
</article>

Related List NarrowRelated List Narrowdev ready

Preview

Code

<article class="slds-card slds-card--narrow">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
          <svg class="slds-icon slds-icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
            <span class="slds-text-heading--small">Contacts (3)</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options</span>
      </button>
    </div>
  </div>
  <div class="slds-card__body">
    <div class="slds-card__body--inner">
      <div class="slds-tile">
        <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <dl class="slds-list--horizontal slds-wrap">
            <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
            <dd class="slds-item--detail slds-truncate">Description for first label</dd>
            <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
            <dd class="slds-item--detail slds-truncate">Description for second label</dd>
          </dl>
        </div>
      </div>
      <div class="slds-tile">
        <h3 class="slds-truncate" title="Related Record Title 2"><a href="javascript:void(0);">Related Record Title 2</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <dl class="slds-list--horizontal slds-wrap">
            <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
            <dd class="slds-item--detail slds-truncate">Description for first label</dd>
            <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
            <dd class="slds-item--detail slds-truncate">Description for second label</dd>
          </dl>
        </div>
      </div>
      <div class="slds-tile">
        <h3 class="slds-truncate" title="Related Record Title 3"><a href="javascript:void(0);">Related Record Title 3</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <dl class="slds-list--horizontal slds-wrap">
            <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
            <dd class="slds-item--detail slds-truncate">Description for first label</dd>
            <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
            <dd class="slds-item--detail slds-truncate">Description for second label</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-card__footer"><a href="javascript:void(0);">View All <span class="slds-assistive-text">entity type</span></a></div>
</article>

Component Overview

To initialize a card, apply the .slds-card class to a containing <div>. 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.

The card body can consume either a Data Table or a Tile.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-card
Applied to:

<article>

Outcome:

Initializes card

Required:

Required

Comments:

--

.slds-card__header
Applied to:

<div>

Outcome:

Initializes card header

Required:

Required

Comments:

--

.slds-card__body
Applied to:

<div>

Outcome:

Initializes card body

Required:

Required

Comments:

--

.slds-card__body--inner
Applied to:

Any element

Outcome:

Add spacing around inner elements of a card (e.g. a tile)

Required:

No, optional element or modifier

Comments:

--

.slds-card__footer
Applied to:

<div>

Outcome:

Initializes card footer

Required:

No, optional element or modifier

Comments:

--

.slds-card__tile
Applied to:

.slds-tile

Outcome:

Use class if card consumes any form of a tile

Required:

No, optional element or modifier

Comments:

--

.slds-card--narrow
Applied to:

.slds-card

Outcome:

Modifies styles for card in a narrow column

Required:

No, optional element or modifier

Comments:

--