UI Kit & Component Reference

Live examples of the Bootstrap 5 components used across this app, themed with the JDigital palette. Copy the markup under each example when building new pages so every screen stays visually consistent.

Palette

Brand Blue
#2563EB
primary
Slate
#64748B
secondary
Brand Cyan
#00F7EF
info / logo
Pale Slate
#F1F5F9
light / bg
Red
#DC2626
danger
Ink
#111827
dark

Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Outline Primary</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

<div class="btn-group" role="group">
  <button type="button" class="btn btn-outline-primary">Day</button>
  <button type="button" class="btn btn-outline-primary">Week</button>
</div>

Inputs & Form Controls

<div class="mb-3">
  <label for="sampleText" class="form-label">Text input</label>
  <input type="text" class="form-control" id="sampleText">
</div>

<select class="form-select">
  <option selected>Choose…</option>
  <option value="pdf">PDF</option>
</select>

<textarea class="form-control" rows="3"></textarea>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="sampleSwitch">
  <label class="form-check-label" for="sampleSwitch">Notify me</label>
</div>

Tables

Filename Type Uploaded by Chunks Status Actions
Q3_Meeting.mp4 Video james@j-digitalco.com 42 Completed
Handbook.pdf PDF james@j-digitalco.com 18 Processing
Kickoff_Notes.md Markdown james@j-digitalco.com — Failed 
<table class="table table-striped table-hover align-middle">
  <thead>
    <tr><th>Filename</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Q3_Meeting.mp4</td>
      <td><span class="badge text-bg-success">Completed</span></td>
    </tr>
  </tbody>
</table>

Dropdowns

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Actions
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Rename</a></li>
    <li><a class="dropdown-item text-danger" href="#">Delete</a></li>
  </ul>
</div>

Badges & Alerts

Primary Secondary Completed Info Processing Failed 12 new 
<span class="badge text-bg-success">Completed</span>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  Upload failed — unsupported file type.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Cards

Document
Handbook.pdf

18 chunks · uploaded by james@j-digitalco.com

View
New Chat

Start a fresh conversation thread.

Start 
<div class="card">
  <div class="card-header">Document</div>
  <div class="card-body">
    <h5 class="card-title">Handbook.pdf</h5>
    <p class="card-text text-secondary small">18 chunks</p>
    <a href="#" class="btn btn-sm btn-primary">View</a>
  </div>
</div>

Tabs, Pagination & Progress

65%
<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Chunks</a></li>
</ul>

<div class="progress">
  <div class="progress-bar" style="width: 65%">65%</div>
</div>

Modal (confirmation pattern)

<button data-bs-toggle="modal" data-bs-target="#sampleDeleteModal">Delete…</button>

<div class="modal fade" id="sampleDeleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">…</div>
      <div class="modal-body">…</div>
      <div class="modal-footer">
        <button data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>