Skip to content

🎨 Component Guide - Internal App Hub

Quick Reference for Standardized Components

All components are defined in static/css/components.css using design tokens from tokens.css.

📦 Cards

Basic Card

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Card Title</h5>
    </div>
    <div class="card-body">
        <p>Card content goes here</p>
    </div>
</div>

Card with Colored Header

<div class="card">
    <div class="card-header bg-info">
        <h5 class="mb-0">Info Card</h5>
    </div>
    <div class="card-body">
        <p>Content</p>
    </div>
</div>

Available header colors: - .bg-info - Cyan/blue - .bg-success - Green - .bg-warning - Yellow - .bg-danger - Red

Card with Colored Border

<div class="card border-info">
    <div class="card-header">
        <h5>Info Card</h5>
    </div>
    <div class="card-body">
        <p>Content</p>
    </div>
</div>

🔘 Buttons

Button Styles

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-secondary">Outline</button>

Button Sizes

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Large</button>

Button Group

<div class="btn-group">
    <button class="btn btn-primary">Button 1</button>
    <button class="btn btn-secondary">Button 2</button>
</div>

📝 Forms

Form Group

<div class="form-group">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter name">
    <small class="form-text">Helper text goes here</small>
</div>

Select Dropdown

<div class="form-group">
    <label for="status" class="form-label">Status</label>
    <select class="form-control" id="status">
        <option>Active</option>
        <option>Inactive</option>
    </select>
</div>

📊 Tables

Basic Table

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>[email protected]</td>
                <td><span class="badge badge-success">Active</span></td>
            </tr>
        </tbody>
    </table>
</div>

🏷️ Badges

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span>

🚨 Alerts

<div class="alert alert-info">
    <strong>Info:</strong> This is an informational message.
</div>

<div class="alert alert-success">
    <strong>Success:</strong> Operation completed successfully.
</div>

<div class="alert alert-warning">
    <strong>Warning:</strong> Please review this carefully.
</div>

<div class="alert alert-danger">
    <strong>Error:</strong> Something went wrong.
</div>

📐 Layout

Container

<div class="container">
    <!-- Max-width 1200px, centered -->
</div>

<div class="container-fluid">
    <!-- Full width -->
</div>

Grid System

<div class="row">
    <div class="col-md-6">
        <!-- 50% width -->
    </div>
    <div class="col-md-6">
        <!-- 50% width -->
    </div>
</div>

<div class="row">
    <div class="col-md-4">33%</div>
    <div class="col-md-4">33%</div>
    <div class="col-md-4">33%</div>
</div>

<div class="row">
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
</div>

🎯 Utility Classes

Spacing

<!-- Margin Bottom -->
<div class="mb-0">No margin</div>
<div class="mb-1">Extra small</div>
<div class="mb-2">Small</div>
<div class="mb-3">Medium</div>
<div class="mb-4">Large</div>
<div class="mb-5">Extra large</div>

<!-- Margin Top -->
<div class="mt-4">Top margin</div>

<!-- Margin Right/Left -->
<span class="me-2">Right margin</span>
<span class="ms-2">Left margin</span>

Flexbox

<div class="d-flex justify-content-between align-items-center">
    <div>Left</div>
    <div>Right</div>
</div>

<div class="d-flex gap-2">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Text Alignment

<div class="text-left">Left aligned</div>
<div class="text-center">Center aligned</div>
<div class="text-right">Right aligned</div>

Text Colors

<p class="text-primary">Primary color</p>
<p class="text-success">Success color</p>
<p class="text-danger">Danger color</p>
<p class="text-warning">Warning color</p>
<p class="text-muted">Muted text</p>
<p class="text-dark">Dark text</p>

Display

<div class="d-flex">Flexbox</div>
<div class="d-grid">Grid</div>
<div class="d-none">Hidden</div>

🎨 Customizing Components

Where to Edit

Colors & Spacing: - Edit static/css/tokens.css - Change variables like --primary, --spacing-lg, etc.

Component Styles: - Edit static/css/components.css - Find the component section (e.g., /* CARDS */) - Modify the CSS directly

Example: Change Card Border Radius 

/* In components.css, find: */
.card {
    border-radius: 12px;  /* Change this value */
}

Example: Change Primary Button Color 

/* In tokens.css, find: */
--primary: #6366f1;  /* Change this hex code */

🚀 Common Patterns

Page Header with Action Button

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h2">Page Title</h1>
    <a href="/action" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add New
    </a>
</div>

Card with Table

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Data Table</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table">
                <!-- table content -->
            </table>
        </div>
    </div>
</div>

Form in Card

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Form Title</h5>
    </div>
    <div class="card-body">
        <form method="POST">
            <div class="form-group">
                <label class="form-label">Field</label>
                <input type="text" class="form-control">
            </div>
            <div class="d-flex justify-content-between">
                <a href="/back" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>

📝 Notes

  • All components use design tokens - Change colors/spacing in tokens.css and it updates everywhere
  • No Bootstrap required - These are simple, readable CSS classes
  • Easy to customize - Just edit the CSS files directly
  • Consistent across all tools - One source of truth for styling

🔄 Migration Status

✅ Completed

  • Client Admin (all pages)
  • Card components standardized
  • Button components standardized
  • Form components standardized

🚧 To Do (Gradually)

  • Other tool pages (as you work on them)
  • Remove Bootstrap CSS link (when ready)
  • Add more utility classes as needed

💡 Tips

  1. Start with components.css - Look there first for existing styles
  2. Use design tokens - Don't hardcode colors, use variables
  3. Keep tool-specific styles separate - Only shared components go in components.css
  4. Test after changes - Check multiple tools to ensure consistency

Questions? All the CSS is in plain English - just open the files and read them! 🎨