Cards

Definition

There are four types of cards:

Marketing cards (default)
Complex cards
Card bucket
Card with offset icon

Please find definitions for and use cases for each under their respective sections

Description

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Examples and variants

Marketing cards (default)

The Card will be used for all marketing purposes, or the typical applications of a card in UIs. Examples are: Landing pages, tiles/widgets, visually enhanced links or buttons to lead to another page, navigation, etc.
Each card is modular. Anything and everything EXCEPT the title and the action link can be removed from the card. The bare minimum required for a card to be complete is the title of the card and the action link.
A card with an image in it should have the minimum width of 3 columns.
Images in cards should have appropriate visually balanced ratios (4:3/ 16:9/ square, etc.) There are no specific instructions, however designers please make sure if you are using multiple cards in a row, that all the images have the same height.
Title will truncate at 2 lines. Body copy (or paragraph text) will truncate at 3 lines.
White card is the only one with a border stroke, to show distinction against a white background.
In mobile view, cards will stack one on top of each other.
If there is no date in the bottom left corner of the card, that space will be taken by the action link-styled button. See examples below.

To create a stretched-link card, add the .card-linked class to the main .card element. This will negate any links in the text, so use it carefully.

Marketing cards have color variations available. Use these classes on the main .card element:

.card-primary
.card-secondary
.card-accent
.card-white
Grey is the default, no extra class necessary.

Accessibility considerations

Since the title is cut off at two lines, it is helpful to put a title attribute on the .code-title element.

Accent color

New RDE product is out! Explore Data is finally out and making BIG waves in the data ecosystem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Negat enim summo bono afferre incrementum diem. Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus humanis; Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ad eas enim res ab Epicuro praecepta dantur. Ut scias me intellegere, primum idem esse dico voluptatem, quod ille don.

Primary color

New RDE product is out! Explore Data is finally out and making BIG waves in the data ecosystem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

Linked card

This whole card is a link!

Use .card-linked on the main .card element to get it.

White card

This whole card is a link!

Use .card-linked on the main .card element to get it.

Grey card

This whole card is a link!

This card is linked from the title.

<article class="card card-primary">
  <section class="card-body">
    <div class="card-subtitle">Primary color</div>
    <img src="https://placehold.co/600x400" alt="Placeholder image" />
    <h1
      class="card-title"
      title="New RDE product is out! Explore Data is finally out and making BIG
    waves in the data ecosystem.">
      New RDE product is out! Explore Data is finally out and making
      BIG waves in the data ecosystem.
    </h1>
    <p class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      venenatis dolor quis.
    </p>
  </section>
  <footer class="card-footer">
    <time datetime="09-29-2023">29 September, 2023</time>
    <a href="#">Link to article</a>
  </footer>
</article>

Limited card group

When a design calls for cards to be limited in how many are visible based on viewport, use .card-group-limited. Default is limited to 2 rows, that can be adjusted with the --rows-visible CSS custom property.

curated

DSDR-curated Studies

NICHD funded

NICHD-funded Studies

online analysis

Studies with Online Analysis

variables

Variables

subject specific

Geography

investigator specific

Investigator

series

Series

updates

Recent Updates and Additions

subject specific

Geography

investigator specific

Investigator

series

Series

updates

Recent Updates and Additions

<div class="container">
  <section class="card-group-limited">
    ...
  </section>
</div>

Complex Card

Cards are 100% width unless their width is specified.

The Complex Card is a modular card that will used on transactional pages. Two immediate applications are dataset lists on search results pages, study home pages, and list items in ReDMAS application pages. Anything can be removed from the card as needed.
The right-corner label is STATUS only. Which indicates that it will only have terms like- New, Recently Added, Approved, Rejected, Pending Review, etc. It is a column of its own
Badges in the body of the card will always be GREY and are data-related tags- examples are- NANDA, Journal of Economic Literature, Contains restricted data,
The bare minimum on the card should be a title, to make it complete.
The checkbox will align with the top-most text (either brow text, or if there is no brow text, then the title. Checked state will only change the checkbox, the rest of the card remains as-is.
In mobile view, the right-corner label will go below the title (mockup below)

Accessibility considerations

When including a checkbox, add an id attribute to the title element, and an aria-labelledby attribute to the input for the checkbox.

Brow text

Mental health & well-being in times of COVID-19: A mixed methods study

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

Journal article · 2021

Mental health & well-being in times of COVID-19: A mixed methods study

Status label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

Journal article · 2021

Mental health & well-being in times of COVID-19: A mixed methods study for which there is a super long title so we can test how line clamp works with a super long title because sometimes there are super long titles with description and more

Status label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

Mental health & well-being in times of COVID-19: A mixed methods study

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

Mental health & well-being in times of COVID-19: A mixed methods study

Status label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

Always grey

This too

Of course

Mental health & well-being in times of COVID-19: A mixed methods study

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

Always grey

This too

Of course

<!-- Complex card with everything -->
<article class="card card-complex">
  <div class="card-check">
    <input
      class="form-check-input"
      id="card-check"
      name="card-check"
      type="checkbox"
      value="true"
      aria-labelledby="card-title"
    />
  </div>
  <section class="card-body">
    <header>
      <div class="card-header">
        <div class="card-subtitle">Journal article · 2021</div>
        <h1 class="card-title" id="card-title">
          Mental health & well-being in times of COVID-19: A mixed
          methods study
        </h1>
      </div>
      <div class="badge badge-primary">Status label</div>
    </header>
    <p class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      venenatis dolor quis.
    </p>
  </section>

  <footer class="card-footer">
    <button class="btn btn-link">Link 1</button>
    <button class="btn btn-link">Link 2</button>
    <button class="btn btn-link">Link 3</button>
  </footer>
</article>

Card Bucket

Card bucket is used to display a series of content. Current use case is StatSnap specific. Width can be 3 columns, 4 columns, or 6 columns; height varies by content selected. Mix and match atoms and molecules from Design System to meet specific use case (i.e. secondary buttons, body text, etc.).

Card Bucket Variant

<div class="col-xl-4 col-6">
  <div class="card card-bucket">
    <div class="card-body d-flex flex-column">
      <div class="card-title">Card Bucket Variant</div>
      <button class="btn btn-link">Clear all</button>
      <button class="btn btn-sm rounded-pill btn-white">
        <span>Really really really long label</span><i
          class="fa-solid fa-x ms-2"></i>
      </button>
      <button class="btn btn-sm rounded-pill btn-white">
        <span>Another topic</span><i class="fa-solid fa-x"></i>
      </button>
      <button class="btn btn-sm rounded-pill btn-white">
        <span>Label</span><i class="fa-solid fa-x"></i>
      </button>
      <button type="button" class="btn btn-sm btn-outline-secondary">
        <i class="fa-solid fa-plus"></i>
        <span>Button</span>
      </button>
    </div>
  </div>
</div>

Card with offset icon

The Card with offset icon is to promote an Archive's statistical fact to public. It can have a link that takes the user to the corresponding page.
The icon is intentionally run over to the block. It is to decrease user's attention to the icon because the icon is not the main content of the card. The main attention will go to the main text.

card-linked version

To get the hover state add the class .card-linked to .card-offset-icon class.

73,973

Studies

12,536,973,973

Publications

1,973,909

The max icon size is 96 x 96 px ( 6rem x 6 rem), Use BS5 column classes to control the width of cards. watermelon watermelon watermelon.

1,973,973

card-linked version       
      <div class="row mb-3">
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-offset-icon card-linked">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 448 512">
              <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
              <path d="M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"/>
            </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">73,973</h2>
              <p class="card-text-icon">
                Studies
              </p>
            </div>
            <div class="card-chevron">
              <a href="#">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-offset-icon card-linked">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 512 512">
              <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
              <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
            </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">12,536,973,973</h2>
              <p class="card-text-icon">
                Publications
              </p>
            </div>
            <div class="card-chevron">
              <a href="#">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
              </a>
            </div>
          </div>
        </div>   
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-offset-icon card-linked">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg"  width="96" height="96" viewBox="0 0 448 512">
                <path d="M96 0C43 0 0 43 0 96L0 416c0 53 43 96 96 96l288 0 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64c17.7 0 32-14.3 32-32l0-320c0-17.7-14.3-32-32-32L384 0 96 0zm0 384l256 0 0 64L96 448c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16zm16 48l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">1,973,909</h2>
              <p class="card-text-icon">
                The max icon size is 96 x 96 px ( 6rem x 6 rem), Use BS5 column classes to control the width of cards. watermelon watermelon watermelon. 
              </p>
            </div>
            <div class="card-chevron">
              <a href="#">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-offset-icon card-linked">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 448 512">
              <path d="M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"/>
            </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">1,973,973</h2>
            </div>
            <div class="card-chevron">
              <a href="#">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
              </a>
            </div>
          </div>
        </div>
        
      </div>

Non-card-linked version

Do not use the class .card-linked or the chevron div. This version of the card does not have a hover state as it is not card-linked.

12,536,973,973

Studies

12,536,973,973

Publications

1,973,909

The max icon size is 96 x 96 px ( 6rem x 6 rem), Use BS5 column classes to control the width of cards. watermelon watermelon watermelon.

1,973,973

Non-card-linked version
      <div class="row mb-3 stack stack-2">
        <div class="col-xl-4 col-12">
          <div class="card card-offset-icon">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 448 512">
              <path d="M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"/>
            </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">12,536,973,973</h2>
              <p class="card-text-icon">
                Studies
              </p>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-12">
          <div class="card card-offset-icon">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 512 512">
              <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
              <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">12,536,973,973</h2>
              <p class="card-text-icon">
                Publications
              </p>
            </div>
          </div>
        </div>   
        <div class="col-xl-4 col-12">
          <div class="card card-offset-icon">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 448 512">
                <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                <path d="M96 0C43 0 0 43 0 96L0 416c0 53 43 96 96 96l288 0 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64c17.7 0 32-14.3 32-32l0-320c0-17.7-14.3-32-32-32L384 0 96 0zm0 384l256 0 0 64L96 448c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16zm16 48l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">1,973,909</h2>
              <p class="card-text-icon">
                The max icon size is 96 x 96 px ( 6rem x 6 rem), Use BS5 column classes to control the width of cards. watermelon watermelon watermelon. 
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-3 stack stack-2">
        <div class="col-xl-4 col-12">
          <div class="card card-offset-icon">
            <div class="card-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 448 512">
                <path d="M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"/>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <h2 class="card-offset-title">1,973,973</h2>
            </div>
          </div>
        </div>

Card sizing

Use BS5 column classes to control the width of cards.

Testing

New RDE product is out! Explore Data is finally out and making BIG waves in the data ecosystem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.

<div class="row">
  <div class="col-12 col-md-6">
    <article class="card card-accent">
      <section class="card-body">
        <div class="card-subtitle">Testing</div>
        <h1 class="card-title">
          New RDE product is out! Explore Data is finally out and making BIG
          waves in the data ecosystem.
        </h1>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
          venenatis dolor quis.
        </p>
      </section>
    </article>
  </div>
</div>

Variables

CSS custom properties

Plus many Bootstrap custom property overrides

--#{$prefix}card-body-gap: 1rem;

Boostrap overrides

$card-bg: $grey-10;
$card-border-radius: 0.25rem;
$card-border-color: transparent;
$card-border-width: 1px;
$card-box-shadow: none;
$card-subtitle-color: $grey-200;
$card-title-spacer-y: 0;
$card-cap-padding-y: 0;
$card-cap-padding-x: 0;
$card-cap-bg: var(--#{$prefix}card-bg);