Component Library
Buttons
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>Cards
Default Card
This is a default card with basic styling.
Primary Card
This card uses the primary color theme.
Secondary Card
This card uses the secondary color theme.
<div class="card">
<div class="card-header">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>Card content</p>
</div>
</div>Alerts
Primary Alert: This is a primary alert message.
Secondary Alert: This is a secondary alert message.
Tertiary Alert: This is a tertiary alert message.
Success: Operation completed successfully!
Danger: Something went wrong.
<div class="alert alert-primary">
<strong>Alert:</strong> Your message here.
</div>Form Elements
<div class="form-group">
<label class="form-label">Text Input</label>
<input type="text" class="form-input" placeholder="Enter text">
</div>Switches & Toggles
<label class="switch">
<input type="checkbox" class="switch-input">
<span class="switch-slider"></span>
<span class="switch-label">Toggle Label</span>
</label>Grid System
Grid Item 1
Grid Item 2
Grid Item 1
Grid Item 2
Grid Item 3
Item 1
Item 2
Item 3
Item 4
<div class="grid grid-3">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>Tables
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | Editor | Active |
| Bob Johnson | bob@example.com | Viewer | Pending |
<table class="table">
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>Images & Media
<img src="..." class="img-fluid" alt="...">
<img src="..." class="img-rounded" alt="...">
<img src="..." class="img-circle" alt="...">