Cards

Flexible and extensible content container with multiple variants and options.

Basic Card

Cards are built with as little markup as possible:

This is a simple card with just a body. Cards support a wide variety of content.

HTML

<div class="focus-card">
  <div class="focus-card-body">
    This is a simple card with just a body.
  </div>
</div>

Header and Footer

Add an optional header and/or footer within a card:

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

HTML

<div class="focus-card">
  <div class="focus-card-header">
    <h4>Card Title</h4>
  </div>
  <div class="focus-card-body">
    <p>Some quick example text to build on the card title.</p>
  </div>
  <div class="focus-card-footer">
    <small class="text-muted">Last updated 3 mins ago</small>
  </div>
</div>

Card with Actions

Add buttons or links to card headers and footers:

Special Title Treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

HTML

<div class="focus-card">
  <div class="focus-card-header">
    <h5>Special Title Treatment</h5>
  </div>
  <div class="focus-card-body">
    <p>With supporting text below.</p>
    <a href="#" class="focus-btn focus-btn-primary">Go somewhere</a>
  </div>
</div>

Card Grid

Use .focus-card-grid to create responsive grid layouts:

Card One

This is the first card in the grid.

Card Two

This is the second card in the grid.

Card Three

This is the third card in the grid.

HTML

<div class="focus-card-grid">
  <div class="focus-card">
    <div class="focus-card-header">
      <h4>Card One</h4>
    </div>
    <div class="focus-card-body">
      <p>This is the first card in the grid.</p>
    </div>
  </div>
  <div class="focus-card">
    <div class="focus-card-header">
      <h4>Card Two</h4>
    </div>
    <div class="focus-card-body">
      <p>This is the second card in the grid.</p>
    </div>
  </div>
  <div class="focus-card">
    <div class="focus-card-header">
      <h4>Card Three</h4>
    </div>
    <div class="focus-card-body">
      <p>This is the third card in the grid.</p>
    </div>
  </div>
</div>

Advanced Card Grid

Complex card layout with structured headers, status badges, and footers:

Card Title

Subtitle text

Active

Cards can have structured headers with titles, subtitles, and badges for status indication.

Updated 2 hours ago

Another Card

Secondary text

Inactive

Clickable cards with hover effects are perfect for dashboard layouts.

Updated 1 day ago

Elevated Card

This card has a stronger shadow for more attention.

HTML

<div class="focus-card-grid">
  <div class="focus-card focus-card-clickable">
    <div class="focus-card-header">
      <div>
        <h3 class="focus-card-title">Card Title</h3>
        <p class="focus-card-subtitle">Subtitle text</p>
      </div>
      <span class="focus-badge focus-badge-active">Active</span>
    </div>
    <div class="focus-card-body">
      <p>Cards can have structured headers with titles, subtitles, and badges.</p>
    </div>
    <div class="focus-card-footer">
      <i class="fas fa-clock"></i>
      <span>Updated 2 hours ago</span>
    </div>
  </div>

  <div class="focus-card focus-card-clickable">
    <div class="focus-card-header">
      <div>
        <h3 class="focus-card-title">Another Card</h3>
        <p class="focus-card-subtitle">Secondary text</p>
      </div>
      <span class="focus-badge focus-badge-inactive">Inactive</span>
    </div>
    <div class="focus-card-body">
      <p>Clickable cards with hover effects are perfect for dashboards.</p>
    </div>
    <div class="focus-card-footer">
      <i class="fas fa-clock"></i>
      <span>Updated 1 day ago</span>
    </div>
  </div>

  <div class="focus-card focus-card-elevated">
    <div class="focus-card-header">
      <h3 class="focus-card-title">Elevated Card</h3>
    </div>
    <div class="focus-card-body">
      <p>This card has a stronger shadow for more attention.</p>
    </div>
  </div>
</div>