Card - Baseline UI

Basic Usage

Card Title

This is the content of the card component.

HTML

<div class="bl-card">
  <div class="bl-card-body">
    <h3 class="bl-card-title">Card Title</h3>
    <p>Content</p>
  </div>
</div>

With Header and Footer

Card Header

Card Body Content

HTML

<div class="bl-card">
  <div class="bl-card-header">
    <h3 class="bl-card-title">Card Header</h3>
  </div>
  <div class="bl-card-body">
    <p>Card Body Content</p>
  </div>
  <div class="bl-card-footer">
    <button class="bl-btn bl-btn-primary">Action</button>
  </div>
</div>

Accent Variants

Accent Left

Card with left accent line

Accent Right

Card with right accent line

HTML

<div class="bl-card bl-card-accent-left">
  <div class="bl-card-body">
    <h3 class="bl-card-title">Accent Left</h3>
  </div>
</div>

<div class="bl-card bl-card-accent-right">
  <div class="bl-card-body">
    <h3 class="bl-card-title">Accent Right</h3>
  </div>
</div>