{% set page_group = "admin" %} {% include 'components/head.html' %}
{% include 'components/nav-account.html' %}
{% include 'components/alerts.html' %}

{{ page.title }}

{{ page.description }}

Colors

Color tokens defined in tokens.css. All colors are available as CSS custom properties.

Primary (Purple)
50 #f5f3ff
100 #ede9fe
200 #ddd6fe
300 #c4b5fd
400 #a78bfa
500 #8b5cf6
600 #7c3aed
700 #6d28d9
800 #5b21b6
900 #4c1d95
Semantic Colors
Success #22c55e --bs-success
Warning #f59e0b --bs-warning
Danger #f43f5e --bs-danger
Info #3b82f6 --bs-info
Neutrals (Gray Scale)
50 #f8fafc
100 #f1f5f9
200 #e2e8f0
300 #cbd5e1
400 #94a3b8
500 #64748b
600 #475569
700 #334155
800 #1e293b
900 #0f172a
Primary Gradient
--gradient-primary linear-gradient(135deg, #667eea 0%, #764ba2 100%)
CSS Usage 
/* Use CSS custom properties */
.my-element {
    background-color: var(--primary-600);
    color: var(--white);
    border-color: var(--bs-border-color);
}

/* Gradient usage */
.my-header {
    background: var(--gradient-primary);
}

Typography

Inter is the primary font family, loaded from Google Fonts with system font fallbacks.

Font Family

Inter - The quick brown fox jumps over the lazy dog.

--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
Font Sizes
Token Size Example
--font-size-xs 0.75rem (12px) Extra small text
--font-size-sm 0.875rem (14px) Small text
--font-size-base 1rem (16px) Base text
--font-size-lg 1.125rem (18px) Large text
--font-size-xl 1.25rem (20px) Extra large text
--font-size-2xl 1.5rem (24px) 2XL text
--font-size-3xl 1.875rem (30px) 3XL text
Font Weights
Normal 400 --font-weight-normal
Medium 500 --font-weight-medium
Semibold 600 --font-weight-semibold
Bold 700 --font-weight-bold
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
HTML 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p style="font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);">
    Custom styled paragraph
</p>

Spacing

Consistent spacing scale based on 4px increments. Use these tokens for margins, padding, and gaps.

Token Value Pixels Visual
--space-1 0.25rem 4px
--space-2 0.5rem 8px
--space-3 0.75rem 12px
--space-4 1rem 16px
--space-5 1.25rem 20px
--space-6 1.5rem 24px
--space-8 2rem 32px
--space-10 2.5rem 40px
--space-12 3rem 48px
--space-16 4rem 64px
Border Radius
sm 4px
md 6px
lg 8px
xl 12px
2xl 16px
full pill
CSS Usage 
.my-card {
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-xl);
    gap: var(--space-3);
}

Buttons

Button variants with hover states and shadows. Primary buttons use the gradient background.

Primary Button
HTML 
<button class="btn btn-primary">Primary</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>
Secondary Button
HTML 
<button class="btn btn-secondary">Secondary</button>
Outline Buttons
HTML 
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-secondary">Outline Secondary</button>
<button class="btn btn-outline-success">Outline Success</button>
<button class="btn btn-outline-danger">Outline Danger</button>
Ghost Button
HTML 
<button class="btn btn-link">Link Style</button>
<button class="btn btn-ghost">Ghost Button</button>
Semantic Buttons
HTML 
<button class="btn btn-success"><i class="fa-solid fa-check me-1"></i> Success</button>
<button class="btn btn-warning"><i class="fa-solid fa-exclamation-triangle me-1"></i> Warning</button>
<button class="btn btn-danger"><i class="fa-solid fa-trash me-1"></i> Delete</button>
<button class="btn btn-info"><i class="fa-solid fa-info-circle me-1"></i> Info</button>
Buttons with Icons
HTML 
<button class="btn btn-primary">
    <i class="fa-solid fa-plus me-1"></i> Add Item
</button>

Badges

Status badges with subtle backgrounds and colored text. Use for status indicators, counts, and labels.

Subtle Badges (Default)
Primary Secondary Success Warning Danger Info
HTML 
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-info">Info</span>
Solid Badges
Primary Success Danger
HTML 
<span class="badge badge-solid bg-primary">Primary</span>
<span class="badge badge-solid bg-success">Success</span>
<span class="badge badge-solid bg-danger">Danger</span>
Common Status Patterns
Active Pending Cancelled Archived
5 Users NEW HOT
HTML 
<span class="badge bg-success"><i class="fa-solid fa-check me-1"></i> Active</span>
<span class="badge bg-warning"><i class="fa-solid fa-clock me-1"></i> Pending</span>
<span class="badge bg-danger"><i class="fa-solid fa-times me-1"></i> Cancelled</span>
<span class="badge bg-secondary"><i class="fa-solid fa-archive me-1"></i> Archived</span>

Stat Cards

KPI display cards for dashboards. Features hover lift effect and icon color variants.

1,284
Total Customers
$24,500
Revenue
42
Pending Orders
8.5 min
Avg Wait Time
HTML 
<div class="stat-card stat-card--primary">
    <div class="stat-card-icon">
        <i class="fa-solid fa-users"></i>
    </div>
    <div class="stat-card-value">1,284</div>
    <div class="stat-card-label">Total Customers</div>
</div>

<!-- Color variants: stat-card--primary, stat-card--success, stat-card--warning, stat-card--danger, stat-card--info -->

Event Cards

Multi-section cards with header, body, and footer. Used for event listings, promotions, and detailed item displays.

Summer Sale Event
Active Promotion
Jun 1 - Jun 30
20% Off

Get 20% off all summer apparel. Limited time offer for loyalty members.

Active
Holiday Special
Upcoming Event
Dec 15 - Dec 31
Free Gift

Free gift with purchase over $50. Perfect for holiday shopping!

Scheduled
HTML 
<div class="event-card event-card--active">
    <div class="event-card-header">
        <h5 class="event-card-title">Summer Sale Event</h5>
        <div class="event-card-subtitle">Active Promotion</div>
    </div>
    <div class="event-card-body">
        <div class="event-card-meta">
            <div class="event-card-meta-item">
                <i class="fa-solid fa-calendar"></i>
                <span>Jun 1 - Jun 30</span>
            </div>
        </div>
        <p class="text-muted mb-0">Event description...</p>
    </div>
    <div class="event-card-footer">
        <span class="badge bg-success">Active</span>
        <button class="btn btn-sm btn-primary">View Details</button>
    </div>
</div>

<!-- Variants: event-card--active, event-card--upcoming, event-card--completed, event-card--cancelled -->

Item Cards

Horizontal cards for product/item listings with image, content, and actions.

Vintage Denim Jacket
Size M | Excellent condition
$45.00
Running Sneakers
Size 10 | Like new
$32.00
HTML 
<div class="item-card">
    <img src="item.jpg" alt="Item" class="item-card-image">
    <div class="item-card-content">
        <div class="item-card-title">Vintage Denim Jacket</div>
        <div class="item-card-description">Size M | Excellent condition</div>
        <div class="item-card-price">$45.00</div>
    </div>
    <div class="item-card-actions">
        <button class="btn btn-sm btn-outline-primary"><i class="fa-solid fa-eye"></i></button>
        <button class="btn btn-sm btn-primary"><i class="fa-solid fa-cart-plus"></i></button>
    </div>
</div>

Forms

Form controls with focus states, validation, and various input types.

Text Inputs
Please provide a valid value.
HTML 
<label class="form-label">Label</label>
<input type="text" class="form-control" placeholder="Enter text...">

<!-- Validation states -->
<input type="text" class="form-control is-valid" value="Valid">
<input type="text" class="form-control is-invalid" value="Invalid">
<div class="invalid-feedback">Error message</div>
Select Dropdown
HTML 
<label class="form-label">Select Option</label>
<select class="form-select">
    <option selected>Choose an option...</option>
    <option value="1">Option One</option>
    <option value="2">Option Two</option>
</select>
Checkboxes and Radios
HTML 
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1" checked>
    <label class="form-check-label" for="check1">Checkbox label</label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" name="group" id="radio1">
    <label class="form-check-label" for="radio1">Radio label</label>
</div>
Input Groups
HTML 
<div class="input-group">
    <span class="input-group-text"><i class="fa-solid fa-search"></i></span>
    <input type="text" class="form-control" placeholder="Search...">
</div>

Tables

Table styling with striped rows, hover states, and DataTables integration.

ID Customer Status Amount Actions
#1001 John Smith Completed $125.00
#1002 Jane Doe Pending $89.50
#1003 Bob Wilson Cancelled $45.00
HTML 
<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Status</th>
            <th>Amount</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>#1001</td>
            <td>John Smith</td>
            <td><span class="badge bg-success">Completed</span></td>
            <td>$125.00</td>
            <td>...actions...</td>
        </tr>
    </tbody>
</table>
DataTables Integration: For sortable, searchable tables, initialize with DataTables: $('#myTable').DataTable();

Modals

Modal dialogs with gradient header. Use for confirmations, forms, and detailed views.

HTML 
<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
</button>

<!-- Modal structure -->
<div class="modal fade" id="myModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Modal content goes here...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
        </div>
    </div>
</div>
Modal Sizes

Tabs

Horizontal tab navigation for organizing content sections.

Standard Tabs

Overview content goes here. This is the default active tab.

Details content goes here.

Settings content goes here.

HTML 
<ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">Overview</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">Details</button>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="tab1">Content 1</div>
    <div class="tab-pane fade" id="tab2">Content 2</div>
</div>
Pill Tabs
HTML 
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
</ul>

Icons

Font Awesome 6 icons with size and style variants. Use fa-solid, fa-regular, or fa-brands prefix.

Icon Sizes
fa-xs
fa-sm
default
fa-lg
fa-xl
fa-2xl
HTML 
<i class="fa-solid fa-home fa-xs"></i>
<i class="fa-solid fa-home fa-sm"></i>
<i class="fa-solid fa-home"></i>
<i class="fa-solid fa-home fa-lg"></i>
<i class="fa-solid fa-home fa-xl"></i>
<i class="fa-solid fa-home fa-2xl"></i>
Common Icons
fa-home
fa-user
fa-cog
fa-search
fa-bell
fa-envelope
fa-check
fa-times
fa-plus
fa-trash
fa-edit
fa-download
HTML 
<i class="fa-solid fa-home"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-regular fa-bell"></i>  <!-- Regular (outline) style -->
<i class="fa-brands fa-github"></i> <!-- Brand icons -->
Icon Colors
HTML 
<i class="fa-solid fa-circle" style="color: var(--primary-600);"></i>
<i class="fa-solid fa-check text-success"></i>
<i class="fa-solid fa-times text-danger"></i>

Masonry Grid

Variable-height card layouts using CSS columns. Ideal for dashboards with mixed content heights.

Short Card

Brief content here.

Medium Card

This card has more content to demonstrate variable heights in the masonry layout.

Additional paragraph for height.

Tall Card

This is the tallest card in the grid.

  • List item one
  • List item two
  • List item three
  • List item four
Another Card

More content here.

HTML + CSS 
<style>
.masonry-grid {
    column-count: 3;
    column-gap: 1rem;
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    .masonry-grid { column-count: 2; }
}
@media (max-width: 576px) {
    .masonry-grid { column-count: 1; }
}
</style>

<div class="masonry-grid">
    <div class="masonry-item">
        <div class="card">...</div>
    </div>
    <div class="masonry-item">
        <div class="card">...</div>
    </div>
</div>

Migration Guide

Class mappings for migrating from Bootstrap 3 to Bootstrap 5. The admin theme provides compatibility layers for common patterns.

Panel to Card Migration
Bootstrap 3 (Legacy) Bootstrap 5 (Modern) Notes
.panel .card Both work - legacy supported
.panel-heading .card-header Gradient applied to both
.panel-body .card-body Same padding
.panel-footer .card-footer Same styling
.panel-title .card-title Color inheritance fixed
Grid System
Bootstrap 3 Bootstrap 5 Notes
.col-xs-* .col-* No xs prefix needed
.col-md-offset-* .offset-md-* Legacy supported via CSS
.hidden-xs .d-none .d-sm-block Use display utilities
.visible-md .d-none .d-md-block .d-lg-none Combine display utilities
Button Classes
Bootstrap 3 Bootstrap 5 Notes
.btn-default .btn-secondary Legacy supported
.btn-xs .btn-sm Use sm instead
Labels to Badges
Bootstrap 3 Bootstrap 5 Notes
.label .label-primary .badge .bg-primary Both supported
.label .label-success .badge .bg-success Both supported
.label .label-warning .badge .bg-warning Both supported
.label .label-danger .badge .bg-danger Both supported
Form Classes
Bootstrap 3 Bootstrap 5 Notes
.form-group .mb-3 Legacy .form-group supported
.control-label .form-label Use form-label
.form-control .form-control Same class name
select .form-select New class for selects
Utility Classes
Bootstrap 3 Bootstrap 5 Notes
.pull-left .float-start LTR/RTL aware
.pull-right .float-end LTR/RTL aware
.text-left .text-start LTR/RTL aware
.text-right .text-end LTR/RTL aware
margin/padding inline .m-*, .p-*, .ms-*, .me-* Spacing utilities
Compatibility Note: The admin theme CSS includes a Bootstrap 3 compatibility layer that styles legacy panel and label classes. However, we recommend using Bootstrap 5 classes for all new code.
{% include 'components/footer.html' %}