# Antumo Design System — Full Documentation

> Generated from https://design-system.dev.antumo.com. Every docs page concatenated as one Markdown document.



---

## Install in 30 seconds



```bash [npm — Angular / vanilla]
npm install @antumo/design
```

```bash [NuGet — Blazor / .NET]
dotnet add package Antumo.Blazor
```



```html
<!-- CSS: all tokens + components + fonts, one file -->
<link rel="stylesheet" href="node_modules/@antumo/design/web/dist/antumo.css">

<!-- JS: modal, sidebar, tooltip, theme -->
<script src="node_modules/@antumo/design/web/dist/antumo.min.js"></script>
```

Then use standard Bootstrap 5 class names, styled the Antumo way:

```html
<button class="btn btn-primary btn-md">Primary</button>
<span class="badge badge-md badge-green badge-dot">Online</span>
```

Full details on the [Getting Started](/guide/getting-started) page.


---

# Getting Started

Getting Started

The Antumo Design System ships as **two packages** with different delivery pipelines. Pick the one that matches your stack.

| Package | Registry | Consumers | Docs |
|---|---|---|---|
| `@antumo/design` | npm (Azure Artifacts) | Angular + PrimeNG, vanilla HTML | [CSS + JS](/guide/css-js) |
| `Antumo.Blazor` | NuGet (Azure Artifacts) | Blazor, ASP.NET | [Blazor / .NET](/guide/blazor) |

Both deliver the **same** design tokens, the **same** component styling, and the **same** dark mode — only the packaging differs.

## Registry access

Both feeds are hosted on the private **m2tcorp** Azure Artifacts organization. You need access to that organization to install either package.

### npm {#css-js-npm}

Add to your project's `.npmrc`:

```ini
@antumo:registry=https://pkgs.dev.azure.com/m2tcorp/_packaging/antumo/npm/registry/
```

```bash
npm install @antumo/design
```

### NuGet

Add the feed, then install:

```bash
dotnet nuget add source https://pkgs.dev.azure.com/m2tcorp/_packaging/antumo/nuget/v3/index.json \
  --name antumo

dotnet add package Antumo.Blazor
```

## The one rule that matters

**Use standard Bootstrap 5 class names.** The DS styles them the Antumo way. You almost never write custom CSS.

```html
<button class="btn btn-primary">Save</button>
<table class="table table-striped">…</table>
<input class="form-control" type="email">
```

Components without a Bootstrap 5 equivalent use the `.antumo-*` prefix (e.g. `.antumo-steps`). For anything the DS doesn't cover, write app-specific CSS — but **always use DS tokens** (`var(--antumo-*)`), never hardcoded colors or spacing.

## Next steps

- [CSS + JS setup](/guide/css-js) — Angular + PrimeNG, vanilla HTML, the JS API
- [Blazor / .NET setup](/guide/blazor) — NuGet, `<AntumoIcon>`, Razor components
- [Dark mode](/guide/dark-mode) — one attribute, both themes
- [Design tokens](/guide/tokens) — the CSS variable reference
- [Components](/components/) — all 39, with live examples
- [Figma ↔ CSS map](/guide/figma-css-map) — how we verify design fidelity


---

# CSS + JS (Angular / vanilla)

CSS + JS (Angular / vanilla)

The `@antumo/design` npm package delivers the full design system as CSS + zero-dependency JavaScript.

## CSS

### SCSS import (bundlers)

```scss
@use '@antumo/design';
```

Includes tokens (CSS variables), component classes, and utilities.

### CSS link (no bundler)

```html
<link rel="stylesheet" href="node_modules/@antumo/design/web/dist/antumo.css">
```

### Tokens only

If you only need the design tokens (colors, typography, spacing, effects) without component classes:

```scss
@use '@antumo/design/tokens';
```

## JavaScript

Two approaches — choose one.

### A. Data attributes (no bundler)

For Blazor, ASP.NET MVC, vanilla HTML. Add a single `<script>` and drive everything with HTML attributes.

```html
<script src="node_modules/@antumo/design/web/dist/antumo.min.js"></script>
```

Auto-init runs on `DOMContentLoaded`. Example — a modal:

```html
<button data-antumo-toggle="modal" data-antumo-target="#myModal">Open</button>

<div class="modal" id="myModal" style="display:none">
  <div class="modal-content" role="dialog" tabindex="-1">
    <div class="modal-header">
      <h2>Title</h2>
      <button class="modal-header-close" data-antumo-dismiss="modal">Close</button>
    </div>
    <div class="modal-body">Hello, world.</div>
  </div>
</div>
```

Overlay click + Escape close automatically. Focus trap and scroll lock are handled.

### B. Imperative API (ESM)

For Angular, React, or any bundler with ESM support:

```typescript
import { Modal, Sidebar, Tooltip, autoInit } from '@antumo/design/js';

const modal = Modal.getOrCreateInstance(document.querySelector('#myModal'));
modal.show(triggerEl); // triggerEl regains focus on close
modal.hide();

// or let data attributes work:
autoInit();
```

Types ship with the package (`@antumo/design/js` exposes `.d.ts`), so you get full IntelliSense.

## Angular + PrimeNG

```typescript
// app.config.ts
import { providePrimeNG } from 'primeng/config';
import AntumoPreset from '@antumo/design/primeng';

export const appConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: AntumoPreset,
        options: { darkModeSelector: '[data-theme="dark"]' },
      },
    }),
  ],
};
```

Import CSS in `angular.json`:

```json
"styles": ["node_modules/@antumo/design/web/dist/antumo.css"]
```

## Data attributes reference

| Attribute | Value | Purpose |
|---|---|---|
| `data-antumo-toggle` | `modal` / `sidebar` / `tooltip` | Trigger an action |
| `data-antumo-target` | CSS selector | Target element |
| `data-antumo-dismiss` | `modal` | Close nearest component |
| `data-antumo-placement` | `top` / `bottom` / `left` / `right` | Tooltip position |
| `data-antumo-persist` | `true` / `false` | Sidebar: save state to localStorage |

## Events

All events bubble as `antumo:{component}:{action}` (e.g. `antumo:modal:shown`). Before-events (`:show`, `:hide`) are cancelable:

```javascript
el.addEventListener('antumo:modal:hide', (e) => {
  if (hasUnsavedChanges) e.preventDefault();
});
```

See the [component catalog](/components/) for markup of every component.


---

# Blazor / .NET

Blazor / .NET

`Antumo.Blazor` is one NuGet package that bundles the full stylesheet, fonts, all ~1,500 Lucide icons as typed components, and Razor wrappers for the sidebar, page header, and select. **No npm required.**

## Install

```bash
# 1. Add the Azure Artifacts NuGet feed (one-time)
dotnet nuget add source https://pkgs.dev.azure.com/m2tcorp/_packaging/antumo/nuget/v3/index.json \
  --name antumo

# 2. Install
dotnet add package Antumo.Blazor
```

## Wire it up

```html
<!-- App.razor <head> -->
<link href="_content/Antumo.Blazor/css/antumo.min.css" rel="stylesheet" />
```

```html
<!-- App.razor, BEFORE blazor.web.js -->
<script src="_content/Antumo.Blazor/js/antumo.min.js"></script>
<script src="_framework/blazor.web.js"></script>
```

That single CSS file includes all tokens, all component styles, Bootstrap 5 compatible class names, fonts (CircularXX + Circular LL), and dark mode.


- Do **not** add Google Fonts — fonts are bundled.
- Do **not** add `bootstrap.css` — Antumo already ships BS5-compatible classes.
- Do **not** copy logos to `wwwroot/` — reference `_content/Antumo.Blazor/logos/`.


## Supported frameworks

| Framework | Supported |
|---|---|
| .NET 8 | Yes |
| .NET 9 | Yes |
| .NET 10 | Yes |

Works with Blazor Server, WebAssembly, and Hybrid.

## AntumoIcon

The only required Blazor component — everything else is CSS-only Bootstrap 5 markup.

```razor
@using Antumo.Blazor.Icons

<AntumoIcon Icon="LucideIcons.House" />
<AntumoIcon Icon="LucideIcons.ChevronDown" Size="IconSize.Sm" />
<AntumoIcon Icon="LucideIcons.Settings" StrokeWidth="IconStrokeWidth.Bold" />
```

Icons use `stroke="currentColor"`, so they inherit their parent's text color. Browse all icons at [lucide.dev/icons](https://lucide.dev/icons).

| Size | Pixels | Use |
|---|---|---|
| `IconSize.Xs` | 12 | Badges, inline |
| `IconSize.Sm` | 16 | Compact UI |
| `IconSize.Md` | 20 | Buttons, inputs |
| `IconSize.Base` | 24 | Default |
| `IconSize.Lg` | 28 | Section headers |
| `IconSize.Xl` | 40 | Empty states |

## Razor components

The package also ships declarative wrappers so you write ~25 lines instead of ~130 lines of raw markup:

- **`<AntumoNavSidebar>`** + `AntumoNavItem` / `AntumoNavDropdown` / `AntumoNavGroup` / `AntumoNavProfile` — full sidebar with automatic active state via `NavigationManager`.
- **`<AntumoPageHeader>`** — breadcrumbs, separators, and modifier classes auto-generated.
- **`<AntumoSelect>`** — ARIA combobox with keyboard nav and `EditContext` validation.
- **`<AntumoModal>`** — overlay, sizes, `Escape`/backdrop dismissal, destructive variant.
- **`IAntumoConfirm`** + **`<AntumoConfirmHost>`** — awaitable confirmation prompts.
- **`<AntumoSteps>`** — progress indicator for multi-step flows (not navigation).

```razor
@using Antumo.Blazor.Components

<AntumoPageHeader Title="Devices"
                  Description="Manage all registered devices"
                  Breadcrumbs="@(new BreadcrumbItem[] { new(\"Home\", \"/\"), new(\"Devices\") })">
    <Actions>
        <button class="btn btn-secondary btn-md">Export</button>
        <button class="btn btn-primary btn-md">Add Device</button>
    </Actions>
</AntumoPageHeader>
```

Confirmations are a service, so the decision stays inside the click handler. Register with `AddAntumoBlazor()` and render `<AntumoConfirmHost />` once in your layout:

```razor
@using Antumo.Blazor.Confirm
@inject IAntumoConfirm Confirm

@code {
    private async Task Delete()
    {
        if (!await Confirm.AskDestructiveAsync("Usunąć drukarkę?", "Tej operacji nie można cofnąć.", "Usuń"))
        {
            return;
        }

        // ... perform the deletion
    }
}
```

## Everything else is Bootstrap 5

Buttons, tables, forms, modals, cards, badges — all standard BS5 class names, styled by the DS:

```razor
<button class="btn btn-primary btn-md">
    <AntumoIcon Icon="LucideIcons.Plus" Size="IconSize.Md" /> Add Device
</button>

<span class="badge badge-md badge-green badge-dot">Online</span>
```

## Theme from C\#

```csharp
@inject IJSRuntime JS

await JS.InvokeVoidAsync("Antumo.Theme.toggle");
await JS.InvokeVoidAsync("Antumo.Theme.set", "dark");
await JS.InvokeVoidAsync("Antumo.Theme.useSystemPreference");
```

## Live example

A full MDM dashboard built entirely with DS classes runs at **[design-system-blazor.dev.antumo.com](https://design-system-blazor.dev.antumo.com)** — sidebar, tables, modals, forms, and dark mode.


The complete Blazor guide (all component parameters, migration guide, class-mapping table, and an LLM migration prompt) lives in `blazor/README.md` in the repository — it ships on the NuGet package page too.


---

# Dark Mode

Dark Mode

The entire design system switches between light and dark with **one attribute** on `<html>`. No component code changes, no per-page toggles.

## Enable

```html
<html data-theme="dark">
```

```javascript
// Toggle in JS
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.removeAttribute('data-theme'); // back to light
```

If you load the DS JavaScript bundle, use the `Antumo.Theme` API instead:

```javascript
Antumo.Theme.set('dark');
Antumo.Theme.set('light');
Antumo.Theme.toggle();
Antumo.Theme.useSystemPreference(); // follow OS, persists to localStorage
```

The selected theme persists under the `antumo-theme` localStorage key.

## How it works

Every semantic token resolves to a **different hex per theme**. Dark mode is handled by `[data-theme="dark"]` overriding the token values — **not** by component CSS.

```
component SCSS  →  semantic token  →  raw scale + dark override  →  compiled hex
```

For example, `--antumo-bg-primary`:

| Token | Light | Dark |
|---|---|---|
| `--antumo-bg-primary` | `#ffffff` | `#0c0e12` |
| `--antumo-text-primary` | `#181d27` | `#f7f7f7` |
| `--antumo-border-secondary` | `#e9eaeb` | `#22262f` |

Some scales are **invariant** — the same hex in both themes: `blue`, `green`, `yellow`, `red`, `white`, and the focus color `#5b6ef2`. Navy and gray shift.


Without an explicit `data-theme="dark"`, the theme is always light — regardless of OS setting. Opt into OS-following with `Antumo.Theme.useSystemPreference()`.



The `[data-theme="dark"]` selector targets the document root. Setting it on `<body>` won't cascade correctly.


## Verified both themes

Every one of the [39 mapped components](/guide/figma-css-map) is verified in **both** light and dark — 774 hex comparisons, zero mismatches. Dark values come from the compiled CSS (the source of truth for dark mode), not guessed from Figma.


---

# Design Tokens

Design Tokens

All tokens use the `--antumo-*` prefix and auto-switch between light and dark. **Never hardcode** colors, spacing, typography, or effects — always reference a token.

```scss
// WRONG
color: #3a3a66;
padding: 16px;

// CORRECT
color: var(--antumo-navy-500);
padding: var(--antumo-spacing-3xl);
```

## Semantic colors

Prefer semantic tokens over raw scales — they carry intent and adapt per theme.

| Variable | Light | Dark | Usage |
|---|---|---|---|
| `--antumo-text-primary` | gray-900 | gray-50 | Headings, key content |
| `--antumo-text-secondary` | gray-700 | gray-300 | Labels, subheadings |
| `--antumo-text-tertiary` | gray-400 | gray-400 | Supporting text |
| `--antumo-bg-primary` | white | gray-950 | Main background |
| `--antumo-bg-secondary` | gray-50 | gray-900 | Alternate background |
| `--antumo-border-primary` | gray-300 | gray-700 | High-contrast borders |
| `--antumo-border-secondary` | gray-200 | gray-800 | Default borders |
| `--antumo-bg-brand-solid` | navy-500 | navy shift | Primary actions |

## Color scales

Each scale has shades 25–950 (lower = lighter). Navy and gray shift per theme; blue/green/yellow/red are invariant.

| Scale | Pattern | Usage |
|---|---|---|
| Navy | `--antumo-navy-{25..950}` | Brand, primary actions |
| Gray | `--antumo-gray-{25..950}` | Neutrals, text, borders |
| Blue | `--antumo-blue-{25..950}` | Info |
| Green | `--antumo-green-{25..950}` | Success |
| Yellow | `--antumo-yellow-{25..950}` | Warning |
| Red | `--antumo-red-{25..950}` | Error, destructive |

Key values: `--antumo-navy-500` (`#3A3A66`, brand) and the unified focus ring `#5B6EF2`.

## Spacing

4px-based scale for padding, margin, gap.

| Variable | Value | | Variable | Value |
|---|---|---|---|---|
| `--antumo-spacing-xxs` | 2px | | `--antumo-spacing-3xl` | 16px |
| `--antumo-spacing-xs` | 4px | | `--antumo-spacing-4xl` | 20px |
| `--antumo-spacing-sm` | 6px | | `--antumo-spacing-6xl` | 24px |
| `--antumo-spacing-md` | 8px | | `--antumo-spacing-7xl` | 32px |
| `--antumo-spacing-lg` | 10px | | `--antumo-spacing-8xl` | 40px |
| `--antumo-spacing-xl` | 12px | | | |

## Border radius

| Variable | Value | | Variable | Value |
|---|---|---|---|---|
| `--antumo-radius-xs` | 4px | | `--antumo-radius-xl` | 12px |
| `--antumo-radius-sm` | 6px | | `--antumo-radius-2xl` | 16px |
| `--antumo-radius-md` | 8px | | `--antumo-radius-full` | 999px |
| `--antumo-radius-lg` | 10px | | | |

## Typography

| Variable | Value | Usage |
|---|---|---|
| `--antumo-font-heading` | CircularXX | Headings, buttons |
| `--antumo-font-body` | Circular LL | Body text, labels |

Font sizes are available as utility classes: `.heading-2xl` (32px), `.heading-xl` (28px), `.heading-lg` (24px), `.heading-md` (20px), `.body-lg` (16px), `.body-md` (14px), `.body-sm` (12px).

## Effects

| Variable | Usage |
|---|---|
| `--antumo-shadow-xs` | Cards |
| `--antumo-shadow-sm` | Buttons |
| `--antumo-shadow-md` | Dropdowns, popovers |
| `--antumo-shadow-lg` | Modals, overlays |
| `--antumo-focus-ring` | Focus indicator (4px `#5b6ef2` + 2px white) |

## Source of truth

Tokens are defined in JSON (`tokens/*.json`) and compiled to CSS variables via `npm run build:tokens`. Never edit the generated `_tokens.scss` — change the JSON and rebuild.

```css
.my-custom-card {
  background: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-xl);
  padding: var(--antumo-spacing-6xl);
  box-shadow: var(--antumo-shadow-sm);
  color: var(--antumo-text-primary);
}
```


---

# Figma ↔ CSS Map

Figma ↔ CSS Map

The design system carries a machine-checked map from **every Figma component canvas** to its **CSS class and compiled color** — in light and dark. It lets anyone answer *"is this component the right color?"* from a CSS class alone, without opening Figma.

## What it covers

- **39 component canvases** (all BASE + APPLICATION components)
- **774 hex comparisons** (light + dark, CSS side)
- **0 CSS mismatches** — the map never lies about the compiled CSS
- **6 divergences** — real, documented Figma-vs-CSS gaps flagged for human review

Foundations (Colors, Typography, Icons, Grid, Effects, Logos), ready screens (MDM/POS), and kit helpers are intentionally out of scope — they aren't components.

## How verification works

A CI script (`npm run verify:figma-map`) checks the map on **two axes**:

| Axis | Compares | Meaning | On failure |
|---|---|---|---|
| **CSS token** | map's `expectedHex` **vs** the compiled `antumo.css` | The map matches reality | **Fails the build** |
| **Figma fill** | Figma's fill **vs** the CSS hex | Figma and CSS agree | **Informational only** |

So the build breaks if the map drifts from the CSS, while genuine Figma-vs-CSS design gaps are surfaced as a review list — never silently mixed with errors.

The dark values come from the compiled CSS (the source of truth for dark mode), not guessed from Figma — most Figma canvases are single-theme (light).

## Example: Button

Every Button variant matches Figma exactly (`figmaFill == expectedHex.light`), in both themes:

| Variant | Figma | CSS light | CSS dark |
|---|---|---|---|
| `.btn-primary` bg | `#3a3a66` | `#3a3a66` | `#757dd0` |
| `.btn-primary:hover` | `#32355a` | `#32355a` | `#6068b8` |
| `.btn-primary.btn-destructive` | `#b53f3f` | `#b53f3f` | `#de6363` |
| `.btn-secondary` bg | `#ffffff` | `#ffffff` | `#0c0e12` |
| `.btn-secondary` border | `#d5d7da` | `#d5d7da` | `#373a41` |
| `.btn-tertiary` text | `#3a3a66` | `#3a3a66` | `#757dd0` |

## Divergences {#divergences}

Six documented Figma-vs-CSS gaps remain open for human decision. These are **not** bugs — they're intentional design-intent differences, recorded so nobody guesses the source of truth.

| Component | Property | Figma | CSS | Status |
|---|---|---|---|---|
| Input | hover/focus border | `#3a3a66` | `#5b6ef2` | **Resolved** — CSS is truth (unified focus ring) |
| Navigation | `.nav-item-badge` bg | `#f6f7fa` navy pill | `#b53f3f` red | Open — badge semantics |
| Navigation | `.badge-yellow` bg | `#f1c846` | `#f4cf53` | Open — minor hex drift |
| MiscIcons | `.dot` base | `#2fa46f` green sample | `#181d27` neutral | Open — sample vs neutral base |
| MobileApp | label / value text | `#181d27` gray-900 | `#0a0d12` gray-950 | Open — one-step drift |
| MobileApp | supporting text | `#414651` gray-700 | `#717680` gray-500 | Open — two-step drift |

## Why it matters

- **Instant answers** — "is X the right color?" resolves from the map, no Figma round-trip.
- **CI guard** — change a token and the map stops matching → the build fails, before it ships.
- **Design accountability** — real Figma-vs-CSS gaps are an explicit, reviewable list, not lost in the noise.

The map lives at `figma-css-map.json` in the repository, validated by `figma-css-map.schema.json`.


---

# Components (all 39)

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**](https://design-system.dev.antumo.com/catalog/demo/index.html).

> **Legend** — ✓ verified · ◑ verified with partial coverage (rgba / raster /
> stroke-only elements) · ⚠️ verified with documented [divergences](/guide/figma-css-map#divergences).

| Component | CSS class | Figma canvas | Status |
|---|---|---|---|
| **Button** | `.btn` | [Buttons](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1-15) | ✓ verified |
| **Input** | `.form-control` | [Inputs](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61168) | ⚠️ verified · divergences |
| **Badge** | `.badge` | [Badges](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61167) | ✓ verified |
| **Modal** | `.modal` | [Modals](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61191) | ✓ verified |
| **Table** | `.table` | [Tables](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61176) | ◑ verified · partial |
| **Tabs** | `.nav-link` | [Tabs](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61178) | ✓ verified |
| **Tags** | `.tag` | [Tags](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=881-74329) | ✓ verified |
| **Tooltips** | `.tooltip` | [Tooltips](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61171) | ✓ verified |
| **Dropdown / Select** | `.form-select` | [Dropdown](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61186) | ✓ verified |
| **Checkbox** | `.form-check-input[type=checkbox]` | [Checkbox](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=549-27161) | ✓ verified |
| **Radio** | `.radio-field .form-check` | [Radio button](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=549-28345) | ✓ verified |
| **Toggle** | `.form-switch` | [Toggle](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=502-27580) | ✓ verified |
| **Avatar** | `.avatar` | [Avatars](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61169) | ✓ verified |
| **Breadcrumbs** | `.breadcrumb` | [Breadcrumbs](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61174) | ✓ verified |
| **Content Divider** | `.divider` | [Content divider](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61184) | ✓ verified |
| **Pagination** | `.pagination` | [Pagination](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61180) | ✓ verified |
| **Progress Indicators** | `.progress` | [Progress indicators](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61172) | ◑ verified · partial |
| **Card Header** | `.card-header` | [Card headers](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1274-18356) | ✓ verified |
| **Accordion** | `.accordion` | [Accordions](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1859-1258) | ✓ verified |
| **Counter** | `.counter` | [Counter](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1084-517) | ✓ verified |
| **Notifications** | `.alert` | [Alerts & Notifications](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61175) | ✓ verified |
| **Search** | `.search` | [Search](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61190) | ✓ verified |
| **Loading Indicators** | `.spinner-border` | [Loading indicators](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=485-68583) | ◑ verified · partial |
| **Empty States** | `.empty-state` | [Empty states](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61183) | ✓ verified |
| **Sliders** | `.form-range` | [Sliders](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61173) | ✓ verified |
| **Progress Steps** | `.antumo-step` | [Progress steps](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61179) | ◑ verified · partial |
| **Page Headers** | `.page-header` | [Page headers](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61189) | ✓ verified |
| **Footer** | `.footer` | [Footer](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1157-4564) | ◑ verified · partial |
| **Code Snippet** | `.code-snippet` | [Code snippet](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1619-123507) | ✓ verified |
| **Side Drawer** | `.offcanvas` | [Side drawer](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=635-61588) | ◑ verified · partial |
| **File Upload** | `.upload-dropzone` | [File upload](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61185) | ◑ verified · partial |
| **Date Pickers** | `.datepicker` | [Date pickers](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61187) | ◑ verified · partial |
| **Navigation** | `.nav-sidebar` | [Navigation](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61192) | ⚠️ verified · divergences |
| **Misc Icons** | `.featured-icon` | [Misc icons](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=567-61182) | ⚠️ verified · divergences |
| **Text Elements** | `.text-element` | [Text elements](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1452-20884) | ✓ verified |
| **Overlay** | `.overlay` | [Overlay](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=635-61587) | ✓ verified |
| **Scrollbar** | `.scrollbar` | [Scrollbar](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=623-61194) | ◑ verified · partial |
| **Background Patterns** | `.bg-pattern-container` | [Background elements](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1705-20213) | ◑ verified · partial |
| **Mobile App** | `.mobile-top-bar` | [Mobile App components](https://www.figma.com/design/MvKUz6eJQQcjxMvL4OLgo7/Antumo---Design-System?node-id=1787-35314) | ⚠️ 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](https://design-system.dev.antumo.com/catalog/demo/index.html)** — exhaustive catalog of all components in isolation.
- **[Blazor example app](https://design-system-blazor.dev.antumo.com)** — 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>
```

<div class="antumo-demo">
  <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>
</div>

### 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>
```

<div class="antumo-demo">
  <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>
</div>

### Form controls

```html
<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-control" placeholder="Enter email">
</div>
```

<div class="antumo-demo antumo-demo-block">
  <div class="form-group">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" placeholder="Enter email">
  </div>
</div>

> The rendered blocks above use the real compiled `antumo.css`. Toggle this
> site's dark mode (top bar) to see them switch themes.