Cards

Definition

There are four types of cards:

Marketing cards (default)
Complex cards
Card bucket
Highlight card

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>

Highlight Card

The Highlight Card can be used to display a statistic.

Usage guidelines

The only required content is the statistic inside the div.card-highlight-title.
The icon, brow text, link/chevron, and auxiliary text are all optional.

Examples of linked Hightlight Cards

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

Studies

73,973

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Publications

12,536,973,973

Variables

1,973,909

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Single linked Highlight Card

Highlight Cards have a maximum width of 960px.

1,973,973

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci odio, auctor vel facilisis vitae, laoreet at tortor.

Code sample for linked Highlight Cards

       
      <div class="row mb-3">
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-highlight-icon card-linked">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <p class="card-subtitle">Studies</p>
              <div class="card-highlight-title">73,973</div>  
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
            </div>
          </div>
            <div class="card-chevron">
              <a href="#">
                <span class="visually-hidden">73,973 Studies</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 320 512"
                  width="24"
                  height="24"
                  ><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                  <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"
                  ></path></svg
                >
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-highlight-icon card-linked">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <p class="card-subtitle">Publications</p>
              <div class="card-highlight-title">12,536,973,973</div>
            </div>
            </div>
            <div class="card-chevron">
              <a href="#">
                <span class="visually-hidden">12,536,973,973 Publications</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 320 512"
                  width="24"
                  height="24">
                  <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                  <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"
                  ></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-highlight-icon card-linked">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <p class="card-subtitle">Variables</p>
              <div class="card-highlight-title">1,973,909</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            </div>
            <div class="card-chevron">
              <a href="#">
                <span class="visually-hidden">1,973,909 Variables</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 320 512"
                  width="24"
                  height="24">
                  <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                  <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"
                  ></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-3">
        <h4>Single linked Highlight Card</h4>
        <p>Highlight Cards have a maximum width of 960px.</p>
        <div class="col-12 mb-3">
          <div class="card card-highlight-icon card-linked">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <div class="card-highlight-title">1,973,973</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci odio, auctor vel facilisis vitae, laoreet at tortor.</p>
            </div>
            </div>
            <div class="card-chevron">
              <a href="#">
                <span class="visually-hidden">1,973,973</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 320 512"
                  width="24"
                  height="24">
                  <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                  <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"
                  ></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>

Examples of Highlight Cards without links

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

Studies

12,536,973,973

Publications

12,536,973,973

Lorem ipsum

1,973,909

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci odio, auctor vel facilisis vitae, laoreet at tortor.

Single Highlight Card without link

Highlight Cards have a maximum width of 960px.

1,973,973

Code sample for Highlight Cards without links

<div class="row mb-3">
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-highlight-icon">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <p class="card-subtitle">Studies</p>
              <div class="card-highlight-title">12,536,973,973</div>
            </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-highlight-icon">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <p class="card-subtitle">Publications</p>
              <div class="card-highlight-title">12,536,973,973</div>
              <p class="card-text-icon">Lorem ipsum</p>
            </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-12 mb-3">
          <div class="card card-highlight-icon">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <div class="card-highlight-title">1,973,909</div>
              <p class="card-text-icon">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci odio, auctor vel facilisis vitae, laoreet at tortor.
              </p>
            </div>
          </div>
          </div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-12">
          <h4>Single Highlight Card without link</h4>
          <p>Highlight cards have a maximum width of 960px.</p>
          <div class="card card-highlight-icon">
            <div class="card-highlight-content">
            <div class="card-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                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"
                ></path>
              </svg>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
              <div class="card-highlight-title">1,973,973</div>
            </div>
            </div>
          </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);