Components
All 39 components, each mapped to its Figma canvas and verified against the compiled CSS in light and dark. For interactive, rendered examples of every variant and state, open the live component catalog.
Legend — ✓ verified · ◑ verified with partial coverage (rgba / raster / stroke-only elements) · ⚠️ verified with documented divergences.
| Component | CSS class | Figma canvas | Status |
|---|---|---|---|
| Button | .btn | Buttons | ✓ verified |
| Input | .form-control | Inputs | ⚠️ verified · divergences |
| Badge | .badge | Badges | ✓ verified |
| Modal | .modal | Modals | ✓ verified |
| Table | .table | Tables | ◑ verified · partial |
| Tabs | .nav-link | Tabs | ✓ verified |
| Tags | .tag | Tags | ✓ verified |
| Tooltips | .tooltip | Tooltips | ✓ verified |
| Dropdown / Select | .form-select | Dropdown | ✓ verified |
| Checkbox | .form-check-input[type=checkbox] | Checkbox | ✓ verified |
| Radio | .radio-field .form-check | Radio button | ✓ verified |
| Toggle | .form-switch | Toggle | ✓ verified |
| Avatar | .avatar | Avatars | ✓ verified |
| Breadcrumbs | .breadcrumb | Breadcrumbs | ✓ verified |
| Content Divider | .divider | Content divider | ✓ verified |
| Pagination | .pagination | Pagination | ✓ verified |
| Progress Indicators | .progress | Progress indicators | ◑ verified · partial |
| Card Header | .card-header | Card headers | ✓ verified |
| Accordion | .accordion | Accordions | ✓ verified |
| Counter | .counter | Counter | ✓ verified |
| Notifications | .alert | Alerts & Notifications | ✓ verified |
| Search | .search | Search | ✓ verified |
| Loading Indicators | .spinner-border | Loading indicators | ◑ verified · partial |
| Empty States | .empty-state | Empty states | ✓ verified |
| Sliders | .form-range | Sliders | ✓ verified |
| Progress Steps | .antumo-step | Progress steps | ◑ verified · partial |
| Page Headers | .page-header | Page headers | ✓ verified |
| Footer | .footer | Footer | ◑ verified · partial |
| Code Snippet | .code-snippet | Code snippet | ✓ verified |
| Side Drawer | .offcanvas | Side drawer | ◑ verified · partial |
| File Upload | .upload-dropzone | File upload | ◑ verified · partial |
| Date Pickers | .datepicker | Date pickers | ◑ verified · partial |
| Navigation | .nav-sidebar | Navigation | ⚠️ verified · divergences |
| Misc Icons | .featured-icon | Misc icons | ⚠️ verified · divergences |
| Text Elements | .text-element | Text elements | ✓ verified |
| Overlay | .overlay | Overlay | ✓ verified |
| Scrollbar | .scrollbar | Scrollbar | ◑ verified · partial |
| Background Patterns | .bg-pattern-container | Background elements | ◑ verified · partial |
| Mobile App | .mobile-top-bar | Mobile App components | ⚠️ verified · divergences |
Live examples
The tables above list every component and its verification status. To see each one rendered — every variant, every state, light and dark — use the live surfaces, which run the exact same compiled CSS as this site:
- Component catalog — exhaustive catalog of all components in isolation.
- Blazor example app — a full MDM dashboard using the DS.
Markup patterns
Copy-paste HTML for the most common components:
Buttons
html
<button class="btn btn-primary btn-md">Primary</button>
<button class="btn btn-secondary btn-md">Secondary</button>
<button class="btn btn-tertiary btn-md">Tertiary</button>
<button class="btn btn-primary btn-destructive btn-md">Delete</button>Badges
html
<span class="badge badge-md badge-green badge-dot">Online</span>
<span class="badge badge-md badge-red badge-dot">Offline</span>
<span class="badge badge-md badge-yellow">Pending</span>OnlineOfflinePending
Form controls
html
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>The rendered blocks above use the real compiled
antumo.css. Toggle this site's dark mode (top bar) to see them switch themes.