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>

Separated Variant

Use .focus-card-separated for distinct header and footer sections with background colors:

Requirements

Font Awesome 6 for icons
Modern browser (ES6+ support)
CSS custom properties support

TOC Component

Auto-generation from headings JS
Scroll spy tracking JS
Smooth scroll to sections JS Optional
Sticky positioning
Mobile responsive

JavaScript optional for enhanced features

HTML

<div class="focus-card-grid">
  <!-- Requirements Card -->
  <div class="focus-card focus-card-separated">
    <div class="focus-card-header">
      <h3><i class="fa fa-clipboard-check" style="color: var(--focus-color-warning);"></i> Requirements</h3>
    </div>
    <div class="focus-card-body">
      <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="padding: 0.5rem 0; display: flex; gap: 0.5rem;">
          <i class="fa fa-exclamation-triangle" style="color: var(--focus-color-warning);"></i>
          <span>Font Awesome 6 for icons</span>
        </li>
        <!-- more items -->
      </ul>
    </div>
  </div>

  <!-- TOC Component Card -->
  <div class="focus-card focus-card-separated">
    <div class="focus-card-header">
      <h3><i class="fa fa-puzzle-piece" style="color: var(--focus-color-primary);"></i> TOC Component</h3>
    </div>
    <div class="focus-card-body">
      <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="padding: 0.5rem 0; display: flex; gap: 0.5rem;">
          <i class="fa fa-check" style="color: var(--focus-color-success);"></i>
          <span>Auto-generation <span class="focus-badge focus-badge-success focus-badge-sm">JS</span></span>
        </li>
        <!-- more items -->
      </ul>
    </div>
    <div class="focus-card-footer">
      <i class="fa fa-info-circle"></i> JavaScript optional for enhanced features
    </div>
  </div>
</div>

CSS Classes Reference

All available CSS classes for the Cards component:

Class	Description
`.focus-card`	Base card container with border and padding
`.focus-card-header`	Card header section with bottom border
`.focus-card-body`	Main card content area
`.focus-card-footer`	Card footer section with top border
`.focus-card-title`	Card title styling (typically used in header)
`.focus-card-subtitle`	Card subtitle styling (muted text)
`.focus-card-grid`	Responsive grid layout for cards (auto-fill, 250px min column width)
`.focus-card-grid-2`	Fixed 2-column card grid
`.focus-card-grid-3`	Fixed 3-column card grid
`.focus-card-grid-4`	Fixed 4-column card grid
`.focus-card-separated`	Separated variant with colored header/footer backgrounds
`.focus-card-clickable`	Hover effect for clickable cards (cursor pointer, scale transform)
`.focus-card-elevated`	Enhanced shadow for cards requiring more visual prominence