Cards

Best Practices

Cards are designed to be flexible enough to accommodate most content types

• If a Card occurs outside of a Content Container, it will automatically get a white background

• If the card occurs inside of a Content Container it will automatically get a gray background

• Cards can contain various types of information, so their appearance will vary

• A card’s width is determined by its parent element. In most cases, this is a Bootstrap <div> with a column class. Read Layout Grid for more information about columns

• Rows and columns can be placed inside a card body

• Cards can be themed using theming classes. Read more in Agency Themes

• Use Cards for browsing content.

• Use Tables for comparing data.

Usage

Basic card

<div class="card">
  <div class="card-body">
    This is where Card content goes.
  </div>
</div>

Card without a Shadow

<div class="card shadow-none">
  <div class="card-body">
    This is where Card content goes.
  </div>
</div>

Card without a Border

<div class="card border-0">
  <div class="card-body">
    This is where Card content goes.
  </div>
</div>

Resources

• Bootstrap Documentation - Cards