Cards

Best Practices

• When a Card occurs outside a Content Container, it has a white background.
• When a Card occurs inside a Content Container it has a gray background.
• Titles or headers in Cards may need an appropriate Heading Level.
• Cards are flexible enough to accommodate most content types.
• A card’s width is determined by its parent element. This might be a <div> with a Bootstrap column class. Read Layout Grid for more information.
• 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