Skip to main content

Cards

From the SFDC styleguide:

The card component is a generic container for a piece of content that needs to be separated from other pieces of content on the same page. It may include a header with a title, and can contain a list.
ACME Publishing
Details about this card can be placed in the card body.
<div class="card">
  <div class="card-heading">
    ACME Publishing
  </div>
  <div class="card-detail">
    Details about this card can be placed in the card body.
  </div>
</div>

Sizing

The width of the card will be the full width of its parent element. For example you can wrap a card in a container with a column class.

ACME Publishing
Details about this card can be placed in the card body.
<div class="col-md-4">
  <div class="card">
    <div class="card-heading">
      ACME Publishing
    </div>
    <div class="card-detail">
      Details about this card can be placed in the card body.
    </div>
  </div>
</div>

Details

In general cards will be used to display line by line details about a particular object. Replace the div.card-detail element with an ul.card-detail.

ACME Publishing
  • Nonprofit Organization
  • Santa Barbara, CA
<div class="card">
  <div class="card-heading">
    ACME Publishing
  </div>
  <ul class="card-detail">
    <li>Nonprofit Organization</li>
    <li>Santa Barbara, CA</li>
  </ul>
</div>

Label and value detail pairs

Sometimes you will need to provide labels for your data. This is only appropriate to use with brief bits of data and labels to display.

ACME Publishing
  • 1956
  • $10,000,000
<div class="card">
  <div class="card-heading">
    ACME Publishing
  </div>
  <ul class="card-detail card-detail-labels">
    <li>
      <label class="card-detail-label">Founded</label>
      <span class="card-detail-value">1956</span>
    </li>
    <li>
      <label class="card-detail-label">Budget</label>
      <span class="card-detail-value">$10,000,000</span>
    </li>
  </ul>
</div>

Contextual Cards

In many cases you will want to display icons on cards or card lists to indicate which object or context they relate to in the app.

Jeffery Fisher
  • Executive
  • Santa Barbara, CA
Timothy Lake
  • Sailing Buddy
  • San Francisco, CA
<!-- Card for an Account -->
<div class="card context-account">
  <div class="card-heading">
    ACME Publishing
  </div>
  <ul class="card-detail ">
    <li>Nonprofit Organization</li>
    <li>Santa Barbara, CA</li>
  </ul>
</div>

<!-- Card for Contact -->
<div class="card context-contact">
  <div class="card-heading">
    Jeffery Fisher
  </div>
  <ul class="card-detail ">
    <li>Executive</li>
    <li>Santa Barbara, CA</li>
  </ul>
</div>

<!-- Custom context -->
<div class="card context-c-sailboat">
  <div class="card-heading">
    Timothy Lake
  </div>
  <ul class="card-detail ">
    <li>Sailing Buddy</li>
    <li>San Francisco, CA</li>
  </ul>
</div>

Card list

You can also display grouped lists of cards.

Organizations

ACME Publishing
  • Nonprofit Organization
  • Santa Barbara, CA
Save the Cats
  • Nonprofit Organization
  • Santa Barbara, CA
<div class="card-list">
  <div class="card-list-heading">
    <h3>Organizations</h3>
  </div>
  <div class="card">
    <div class="card-heading">
      ACME Publishing
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div> <!-- end card -->
  <div class="card">
    <div class="card-heading">
      Save the Cats
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div> <!-- end card -->
</div> <!-- end card list -->
<div class="card-list context-account">
  <div class="card-list-heading">
    <h3>Organizations</h3>
  </div>
  <a href="#" class="card">
    <div class="card-heading">
      ACME Publishing
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </a> <!-- end card -->
  <a href="#" class="card">
    <div class="card-heading">
      Save the Cats
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </a> <!-- end card -->
</div> <!-- end card list -->

Contexts on Card Lists

Context classes can also be added to card lists. Adding the context class to the list will add icons to all of the cards within it.

Organizations

ACME Publishing
  • Nonprofit Organization
  • Santa Barbara, CA
Save the Cats
  • Nonprofit Organization
  • Santa Barbara, CA

Organizations

ACME Publishing
  • Nonprofit Organization
  • Santa Barbara, CA
Save the Cats
  • Nonprofit Organization
  • Santa Barbara, CA
<div class="card-list context-account">
  <div class="card-list-heading">
    <h3>Organizations</h3>
  </div>
  <div class="card">
    <div class="card-heading">
      ACME Publishing
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div> <!-- end card -->
  <div class="card">
    <div class="card-heading">
      Save the Cats
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div>
</div>

<div class="card-list context-lead">
  <div class="card-list-heading">
    <h3>Organizations</h3>
  </div>
  <div class="card">
    <div class="card-heading">
      ACME Publishing
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div> <!-- end card -->
  <div class="card">
    <div class="card-heading">
      Save the Cats
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div>
</div>

<div class="card-list context-c-bridge">
  <div class="card-list-heading">
    <h3>Organizations</h3>
  </div>
  <div class="card">
    <div class="card-heading">
      ACME Publishing
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div> <!-- end card -->
  <div class="card">
    <div class="card-heading">
      Save the Cats
    </div>
    <ul class="card-detail ">
      <li>Nonprofit Organization</li>
      <li>Santa Barbara, CA</li>
    </ul>
  </div> <!-- end card -->
</div> <!-- end card list -->

Page Headers (anchors)

Page headers are not new to Bootstrap, but we have included some additional styles and components. The first customization is a class for the SFDC style page header anchor.

This element is designed to span the full width of the window. Use a .container element to provide padding and set the width. The page headers in this documentation are an example of this usage.

These page headers are also responsive. Notice that when you narrow the window the text will center align.

<div class="page-header page-header-anchor">
  <h1>ACME Publishing</h1>
  <p>123 Some Street, San Francisco, CA, 93101</p>
</div>

Light Small Page Header

<!-- Leads -->
<div class="page-header page-header-compact">
<h1>Leads <span class="page-header-label">14 results</span></h1>

</div>

Page Header Contexts

You can set the context of the page header by using the context icon classes.

<!-- Account -->
<div class="page-header page-header-anchor context-account">
  <h1>ACME Publishing</h1>
  <p>123 Some Street, San Francisco, CA, 93101</p>
</div>

<!-- Contact -->
<div class="page-header page-header-anchor context-contact">
  <h1>Jason Blakemoth</h1>
  <p>123 Some Street, San Francisco, CA, 93101</p>
</div>

<!-- Boat -->
<div class="page-header page-header-anchor context-c-boat">
  <h1>HMS Shazam</h1>
  <p>123 Some Street, San Francisco, CA, 93101</p>
</div>

<!-- Triangle -->
<div class="page-header page-header-anchor context-c-triangle">
  <h1>Scheme</h1>
  <p>123 Some Street, San Francisco, CA, 93101</p>
</div>

Light Page Header Contexts

You can set the context of the page header by using the context icon classes.

<!-- Account -->
<div class="page-header context-account">
  <h1>ACME Publishing</h1>
  <p>123 Some Street, San Francisco, CA, 93101</p>
</div>

Light Small Page Header Contexts

You can set the context of the page header by using the context icon classes.

<!-- Account -->
<div class="page-header page-header-compact context-account">
  <h1><span class="page-header-label">recent</span> Accounts</h1>
</div>

<!-- Opportunities -->
<div class="page-header page-header-compact context-opportunity">
  <h1>Opportunities <span class="page-header-label">14 results</span></h1>
</div>

Light Small Page Header Contexts with Transparent BG

You can set the context of the page header by using the context icon classes.

<!-- Leads -->
<div class="page-header page-header-compact page-header-transparent context-lead">
  <h1>Leads <span class="page-header-label">14 results</span></h1>

</div>