Colors

Primary

var(--bs-primary)

Secondary

var(--bs-secondary)

Success

var(--bs-success)

Danger

var(--bs-danger)

Warning

var(--bs-warning)

Info

var(--bs-info)

Light

var(--bs-light)

Dark

var(--bs-dark)

Body

var(--bs-body-color)

Border

var(--bs-border-color)

Buttons

btn btn-primary

btn btn-secondary

btn btn-success

btn btn-danger

btn btn-warning

btn btn-info

btn btn-light

btn btn-dark

btn btn-link

btn btn-outline-primary

btn btn-outline-secondary

btn btn-outline-success

btn btn-outline-danger

btn btn-outline-warning

btn btn-outline-info

btn btn-outline-dark

btn btn-primary btn-sm

btn btn-primary

btn btn-primary btn-lg

btn btn-primary disabled

Disabled link

btn btn-primary disabled

Utilities

.bg-primary .border .shadow-sm .text-body-secondary

Typography

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Body text with strong, emphasis, links, and inline code.

Muted secondary text for subtle emphasis.

Lead paragraph to introduce sections.

Forms

Verification Switch

Not verified

Apply .state-not-verified to the switch input for a red track.

Cards & Badges

Use .card with optional structural pieces:
.card-header → .card-body → .list-group → .card-footer. Add utility classes like .h-100 when you need full-height columns.

Card header New

Card title

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

Action

Cras justo odio
Dapibus ac facilisis in

Footer

card h-100

badge text-bg-primary

Badges

Primary Secondary Success Danger Warning Info Light Dark

badge text-bg-*

Pager

/ 24

.page-box, .page-input, .sep, .toolbar-status

KPI Cards

KPI cards extend .card with .kpi-card plus a modifier (e.g. .kpi--primary).
Typical structure: KPI wrapper → .card-body with metrics → .card-footer for metadata or actions.

Screenings

1,248

+8.5% vs last week

card kpi-card kpi--primary h-100

Full markup

<div class="card kpi-card kpi--primary h-100">
  <div class="card-body">
    <div class="text-uppercase small fw-semibold opacity-75">Screenings</div>
    <div class="display-6 fw-bold">1,248</div>
    <div class="small opacity-75">+8.5% vs last week</div>
  </div>
  <div class="card-footer small text-body-secondary">Meta text</div>
</div>

Verified

834

+2.1% today

card kpi-card kpi--success h-100

In Queue

57

ETA ~ 3m

card kpi-card kpi--info h-100

Pending Review

112

-1.2% vs yesterday

card kpi-card kpi--warning h-100

Errors

9

3 new in last hour

card kpi-card kpi--danger h-100

Avg. Processing

18s

p95: 42s

card kpi-card kpi--secondary h-100

Theme Wrappers

Wrap any group with p-2 theme-* (add h-100 for equal heights) to tint the background. The inner cards stay standard Bootstrap markup.

Jobs Theme

Tinted via wrapper

p-2 theme-jobs h-100

card h-100

Full markup

<div class="p-2 theme-jobs h-100">
  <div class="card h-100">
    <div class="card-body">
      <div class="fw-semibold">Jobs Theme</div>
      <div class="small opacity-75">Tinted via wrapper</div>
    </div>
  </div>
</div>

Admin Theme

Tinted via wrapper

p-2 theme-admin h-100

card h-100

Uploads Theme

Tinted via wrapper

p-2 theme-uploads h-100

card h-100

Uploaded Results Theme

Tinted via wrapper

p-2 theme-uploaded_zips h-100

card h-100

Screenings Theme

Tinted via wrapper

p-2 theme-screenings h-100

card h-100

Grading Theme

Tinted via wrapper

p-2 theme-grading h-100

card h-100

Glaucoma Theme

Tinted via wrapper

p-2 theme-glaucoma h-100

card h-100

Audit Theme

Tinted via wrapper

p-2 theme-audit h-100

card h-100

Named Gradient Cards

Sunrise

Warm gradient

card card-sunrise h-100

Full markup

<div class="card card-sunrise h-100">
  <div class="card-body">
    <div class="fw-semibold">Sunrise</div>
    <div class="small opacity-75">Warm gradient</div>
  </div>
</div>

Sea

Cool gradient

.card-sea

Forest

Green gradient

.card-forest

Lava

Hot gradient

.card-lava

Aurora

Purple/blue gradient

.card-aurora

Candy

Playful pinks

.card-candy

Violet

Indigo/pink

.card-violet

Rainbow

Full spectrum

.card-rainbow