1. Examples
  2. Reference

Reference Catalog

Rendered controls with copyable HTML

This page is the practical copy/paste surface. Each section shows the rendered result first, then the HTML markup directly below it.

Code View

Web Components first, HTML + CSS on demand

Web Components is the default code view on this page. Sections that are still CSS-first are labeled in the viewer so the page stays honest about what exists today.

Theme Switcher

Appearance

System

The bundled helper stores the selected mode in localStorage, resolves system against prefers-color-scheme, keeps the root `data-bs-theme` attribute in sync, and can either wire your own controls or mount the packaged switcher into an empty host.

<div class="inc-theme-toggle" data-inc-theme-switcher>
    <div class="inc-theme-toggle__label">
        <p class="inc-theme-toggle__title">Appearance</p>
        <p class="inc-theme-toggle__value" data-inc-theme-label>System</p>
    </div>
    <div class="inc-button-group inc-button-group--sm" role="group" aria-label="Theme mode">
        <button class="inc-btn inc-btn--secondary" type="button" data-inc-theme-mode="light">Light</button>
        <button class="inc-btn inc-btn--secondary" type="button" data-inc-theme-mode="dark">Dark</button>
        <button class="inc-btn inc-btn--secondary" type="button" data-inc-theme-mode="system">System</button>
    </div>
    <button class="inc-btn inc-btn--outline-secondary inc-btn--sm" type="button" data-inc-theme-toggle>Cycle</button>
</div>

<div data-inc-theme-switcher data-inc-theme-switcher-block></div>

<script>
    window.IncTheme.setMode("dark");
</script>

Page Framing

  1. Examples
  2. Reference

Breadcrumb body wrapper

Use the canonical page wrapper when you want a breadcrumb strip and body stack without introducing another bespoke shell.

<div class="inc-page inc-breadcrumb-body">
    <div class="inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb">
        <ol class="inc-breadcrumb">
            <li class="inc-breadcrumb__item"><a href="./index.html">Examples</a></li>
            <li class="inc-breadcrumb__item active"><span>Reference</span></li>
        </ol>
    </div>
    <div class="inc-page__body inc-breadcrumb-body__body">
        <div class="inc-section-container demo-stack">
            <section class="inc-page-header">...</section>
        </div>
    </div>
</div>

Buttons

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

<button class="inc-btn inc-btn--primary inc-btn--sm" type="button">Small</button>
<button class="inc-btn inc-btn--secondary inc-btn--micro" type="button">Micro</button>

<div class="inc-button-group inc-button-group--sm">
    <button class="inc-btn inc-btn--secondary" type="button">Left</button>
    <button class="inc-btn inc-btn--primary" type="button">Right</button>
</div>

<button class="inc-btn inc-btn--primary is-loading" type="button">Publishing<span class="inc-spinner inc-spinner--border inc-spinner--border--sm" aria-hidden="true"></span></button>
<button class="inc-btn inc-btn--secondary is-loading" type="button">Refreshing<span class="inc-spinner inc-spinner--border inc-spinner--border--sm" aria-hidden="true"></span></button>

<button class="inc-btn inc-btn--primary" type="button" aria-busy="true"><span class="inc-spinner inc-spinner--border inc-spinner--border--sm" aria-hidden="true"></span><span>Publishing</span></button>
<button class="inc-btn inc-btn--outline-secondary" type="button" aria-busy="true"><span class="inc-spinner inc-spinner--border inc-spinner--border--sm" aria-hidden="true"></span><span>Refreshing</span></button>

Badges And Alerts

Approved Pending Rejected Imported
Success alert text.
Information alert text.
Warning alert text.
Danger alert text.
<span class="inc-badge inc-badge--success inc-badge--pill">Approved</span>
<span class="inc-badge inc-badge--warning inc-badge--pill">Pending</span>
<span class="inc-badge inc-badge--danger inc-badge--pill">Rejected</span>
<span class="inc-badge inc-badge--info inc-badge--pill">Imported</span>

<div class="inc-alert inc-alert--success">Success alert text.</div>
<div class="inc-alert inc-alert--info">Information alert text.</div>
<div class="inc-alert inc-alert--warning">Warning alert text.</div>
<div class="inc-alert inc-alert--danger">Danger alert text.</div>

Form Fields

$
Workflow options
Approval route 
<label class="inc-form__label" for="ref-name">Text input</label>
<input id="ref-name" class="inc-form__control" type="text">

<label class="inc-form__label" for="ref-status">Select</label>
<select id="ref-status" class="inc-form__select">
    <option>Draft</option>
    <option selected>In Progress</option>
</select>

<label class="inc-form__label" for="ref-notes">Textarea</label>
<textarea id="ref-notes" class="inc-form__control" rows="3"></textarea>

<label class="inc-form__label" for="ref-start-date">Start date</label>
<input id="ref-start-date" class="inc-form__control" type="date">

<label class="inc-form__label" for="ref-attachment">Attachment</label>
<input id="ref-attachment" class="inc-form__control" type="file">

<div class="inc-input-group">
    <span class="inc-input-group__text">$</span>
    <input class="inc-form__control" type="text">
</div>

<fieldset class="inc-form__fieldset">
    <legend class="inc-form__legend">Workflow options</legend>
    <div class="inc-form__choices">
        <div class="inc-form__check">...</div>
        <div class="inc-form__check inc-form__switch">...</div>
    </div>
</fieldset>

<fieldset class="inc-form__fieldset">
    <legend class="inc-form__legend">Approval route</legend>
    <div class="inc-form__choices">
        <div class="inc-form__check">
            <input class="inc-form__check-input" type="radio" id="ref-route-fast" name="ref-route" checked>
            <label class="inc-form__check-label" for="ref-route-fast">Fast approval</label>
        </div>
        <div class="inc-form__check">
            <input class="inc-form__check-input" type="radio" id="ref-route-standard" name="ref-route">
            <label class="inc-form__check-label" for="ref-route-standard">Standard approval</label>
        </div>
    </div>
</fieldset>

Cards, Metrics, And Empty States

Total Revenue
$247,832
Active Projects
12
In Progress
Exceptions
4
Open Items Updated 10m ago
18
Queue Health
92%
On track
Approvals
7
Waiting
Exceptions
4
Needs review

No saved views

Create a named filter set so your operators can reuse it across screens.

<section class="inc-summary-overview inc-summary-overview--3-col">
    <article class="inc-summary-block">...</article>
    <article class="inc-summary-block">...</article>
    <article class="inc-summary-block">...</article>
</section>

<section class="inc-summary-overview inc-summary-overview--4-col">
    <article class="inc-summary-block">
        <div class="inc-summary-block__header inc-summary-block__header--with-action">
            <span>Open Items</span>
            <span class="inc-summary-block__header-action">Updated 10m ago</span>
        </div>
        <div class="inc-summary-block__body inc-summary-block__body--left">
            <div class="inc-summary-block__value inc-summary-block__value--large">18</div>
        </div>
    </article>
    <article class="inc-summary-block">
        <div class="inc-summary-block__header">Queue Health</div>
        <div class="inc-summary-block__body inc-summary-block__body--right">
            <div class="inc-summary-block__value inc-summary-block__value--small">92%</div>
            <span class="inc-summary-block__status-badge inc-summary-block__status-badge--approved">On track</span>
        </div>
    </article>
    <article class="inc-summary-block">...</article>
    <article class="inc-summary-block">...</article>
</section>

<div class="inc-empty-state">
    <div class="inc-empty-state__content">
        <div class="inc-empty-state__icon" data-inc-icon="empty" aria-hidden="true"></div>
        <h3 class="inc-heading inc-heading--h3">No saved views</h3>
        <p class="inc-text inc-text--regular inc-text--muted">Create a named filter set...</p>
        <div class="inc-empty-state__actions">
            <button class="inc-btn inc-btn--secondary" type="button">Dismiss</button>
            <button class="inc-btn inc-btn--primary" type="button">Create View</button>
        </div>
    </div>
</div>

Tabs

Folder tab content.

Second folder tab content.

Line tab content.

Second line tab content.

<section class="inc-tabs-folder">
    <ul class="inc-tabs-nav" role="tablist">
        <li><button class="inc-tab active" type="button" data-inc-toggle="tab" data-inc-target="#ref-folder-overview">Overview</button></li>
        <li><button class="inc-tab" type="button" data-inc-toggle="tab" data-inc-target="#ref-folder-aging">Aging</button></li>
    </ul>
    <div class="inc-tab-content">
        <div class="inc-tab-pane active" id="ref-folder-overview" role="tabpanel">...</div>
        <div class="inc-tab-pane" id="ref-folder-aging" role="tabpanel">...</div>
    </div>
</section>

<section class="inc-tabs-line">
    <ul class="inc-tabs-nav" role="tablist">
        <li><button class="inc-tab active" type="button" data-inc-toggle="tab" data-inc-target="#ref-line-one">Needs Review</button></li>
        <li><button class="inc-tab" type="button" data-inc-toggle="tab" data-inc-target="#ref-line-two">Ready</button></li>
    </ul>
</section>

Sparklines

Benchmark Current History Delta
HTTP/3 plaintext 5,510 rps +3.1% 
<inc-sparkline values="12,15,14,20,18" width="120" height="28" aria-label="Five point numeric trend"></inc-sparkline>

<inc-sparkline
  points='[{"x":"2026-06-01","y":1200},{"x":"2026-06-02","y":1350}]'
  width="120"
  height="28"
  variant="area"
  tone="accent"
  curve="monotone"
  aria-label="Timestamped benchmark history">
</inc-sparkline>

<inc-sparkline
  values="5120,5400,5310,5600,5510"
  height="28"
  width="120"
  tone="accent"
  show-last-marker
  aria-label="Recent requests per second trend for Incursa HTTP/3 on HTTP plaintext">
</inc-sparkline>

<inc-sparkline values="-3,-1,2,1,4" reference-value="0" show-min-max aria-label="Mixed positive and negative delta trend"></inc-sparkline>

Tables And Lists

Project Period Amount Status
AP-2026-00142 March 2026 $18,240.22 Approved
Needs Review March Closeout Projects Missing Billing Period
Inbox Assigned to me
  1. First review pass
  2. Secondary approval
  3. Final export
Lien Waiver Package
Last updated 14 minutes ago
Compliance Exceptions
2 unresolved items
<div class="inc-table-responsive">
    <table class="inc-table inc-table--sm inc-table--data-table">
        <thead>...</thead>
        <tbody>
            <tr>
                <td class="inc-table__cell inc-table__cell--data">AP-2026-00142</td>
                <td class="inc-table__cell">March 2026</td>
                <td class="inc-table__cell inc-table__cell--numeric">$18,240.22</td>
                <td class="inc-table__cell"><span class="inc-badge inc-badge--success inc-badge--pill">Approved</span></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="inc-list-group">
    <a class="inc-list-group__item inc-list-group__item--action active" href="#">Needs Review</a>
    <a class="inc-list-group__item inc-list-group__item--action" href="#">March Closeout</a>
</div>

<div class="inc-list-group inc-list-group--flush">
    <a class="inc-list-group__item inc-list-group__item--action" href="#">Inbox</a>
    <a class="inc-list-group__item inc-list-group__item--action" href="#">Assigned to me</a>
</div>

<ol class="inc-list-group inc-list-group--numbered">
    <li class="inc-list-group__item">First review pass</li>
    <li class="inc-list-group__item">Secondary approval</li>
    <li class="inc-list-group__item">Final export</li>
</ol>

<div class="inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset">
    <div class="inc-vertical-list__item inc-flex-between">...</div>
</div>

Native Controls

Billing summary 3 items Native details

Example disclosure body.

AP Queue Actions Summary-based menu
Quick actions
Export current view Save filter preset
72%
74% 
<details class="inc-disclosure" open>
    <summary class="inc-disclosure__summary">
        <span class="demo-disclosure-title">
            <span class="inc-disclosure__title">Billing summary</span>
            <span class="inc-badge inc-badge--info inc-badge--pill">3 items</span>
        </span>
        <span class="inc-disclosure__meta">Native details</span>
    </summary>
    <div class="inc-disclosure__content">...</div>
</details>

<details class="inc-native-menu inc-native-menu--block">
    <summary class="inc-native-menu__summary">
        <span class="inc-user-menu__avatar">AP</span>
        <span class="inc-native-menu__section-title">
            <span class="inc-user-menu__name">Queue Actions</span>
            <span class="inc-user-menu__detail">Summary-based menu</span>
        </span>
    </summary>
    <div class="inc-native-menu__panel">...</div>
</details>

<progress class="inc-progress inc-progress--success" max="100" value="72">72%</progress>
<meter class="inc-meter inc-meter--warning" min="0" max="100" low="65" high="90" optimum="100" value="74">74%</meter>

Floating Content

<div class="demo-muted-panel position-relative">
    <div class="inc-tooltip show bs-tooltip-auto" role="tooltip">
        <div class="tooltip-arrow" aria-hidden="true"></div>
        <div class="inc-tooltip__inner">Tooltip text for short hover help.</div>
    </div>
</div>

<div class="demo-muted-panel position-relative">
    <div class="inc-popover show bs-popover-auto" role="tooltip">
        <div class="popover-arrow" aria-hidden="true"></div>
        <div class="inc-popover-header">Popover title</div>
        <div class="inc-popover-body">Popover content can hold short guidance, counts, or a compact callout.</div>
    </div>
</div>

Validation And Filter Toolbars

There are 2 issues to fix

  • Contract number is required.
  • Billing period must be selected.
Status: Needs review Owner: AP Team 
<div class="inc-form__error-summary">
    <h3 class="inc-form__error-summary-title">There are 2 issues to fix</h3>
    <ul class="inc-form__error-summary-list">
        <li>Contract number is required.</li>
        <li>Billing period must be selected.</li>
    </ul>
</div>

<div class="inc-form__group">
    <label class="inc-form__label inc-form__label--required" for="ref-contract">Contract number</label>
    <input id="ref-contract" class="inc-form__control is-invalid" type="text" aria-invalid="true">
    <p class="inc-form__feedback inc-form__feedback--error">Contract number is required.</p>
</div>

<section class="inc-filter-bar">
    <div class="inc-filter-bar__main">...</div>
    <div class="inc-filter-bar__actions">
        <div class="inc-filter-bar__chips">
            <span class="inc-filter-chip">Owner: AP Team</span>
        </div>
    </div>
</section>

Spacing And Visibility Utilities

inc-u-stack-sm

Use the utility layer when you need a light spacing or visibility adjustment without pulling in Bootstrap utility classes.

This alert uses inc-u-hidden-mobile and disappears on smaller screens.

Common helpers now include stack spacing, gap, padding, hidden/mobile-hidden/desktop-hidden, and visually hidden text.

<div class="inc-u-stack-sm">
    <span class="inc-badge inc-badge--info inc-badge--pill">inc-u-stack-sm</span>
    <p class="inc-text inc-text--regular">Light spacing without Bootstrap utilities.</p>
    <div class="demo-chip-row inc-u-gap-sm">
        <button class="inc-btn inc-btn--secondary inc-btn--sm" type="button">Secondary</button>
        <button class="inc-btn inc-btn--primary inc-btn--sm" type="button">Primary</button>
    </div>
</div>

<div class="inc-alert inc-alert--info inc-u-hidden-mobile">Hidden on smaller screens.</div>

Table Families

Review Grid

Record State Amount
AP-142 Needs Review $18,240
AP-148 Expiring Docs $7,882

Analytics Grid

Week Approved Variance
W10 428 +6.2%
W11 447 +4.4%

Spreadsheet Grid

Line Code Hours
001 FRM-042 12.50
002 FRM-043 8.25 
<table class="inc-table inc-table--review-grid inc-table--sm">...</table>
<table class="inc-table inc-table--analytics-grid inc-table--sm">...</table>
<table class="inc-table inc-table--spreadsheet-grid inc-table--sm">...</table>

Overlay Workflows

Modal and offcanvas patterns now have a dedicated showcase page with validation, drawer content, and helper-driven open/close behavior.
Open Overlay Showcase Compare With Drawer Grid 
<button class="inc-btn inc-btn--primary" type="button" data-inc-toggle="modal" data-inc-target="#approval-modal">Open modal</button>
<button class="inc-btn inc-btn--outline-secondary" type="button" data-inc-toggle="offcanvas" data-inc-target="#assignment-drawer">Open offcanvas</button>

Operational States And Feedback

No results matched

Distinct from the create-first empty state.

Export failed

Use a proper failure surface, not just a muted paragraph.

Finance Manager role required

Show when an action is visible but intentionally unavailable.

View saved

Use for asynchronous success or background-status messages.

<div class="inc-state-panel inc-state-panel--results">...</div>
<div class="inc-state-panel inc-state-panel--error">...</div>

<div class="inc-permission-banner">
    <div class="inc-permission-banner__icon" data-inc-icon="permission" aria-hidden="true"></div>
    <div>...</div>
</div>

<div class="inc-toast-stack">
    <div class="inc-toast-card">...</div>
</div>

Detail, Timeline, Files, And Grid Patterns

Record Id
AP-2026-00142
Current request
$18,240.22

Imported from OpenPay

8:13 AM Nightly sync

Timeline entries combine actor, time, event, and state without falling apart visually.

Drop documents here

For review workflows with waiver or attachment requirements.

No files selected yet.

3 rows selected 
<div class="inc-key-value-grid">
    <dl class="inc-key-value inc-key-value--card">
        <dt class="inc-key-value__label">Record Id</dt>
        <dd class="inc-key-value__value inc-key-value__value--data">AP-2026-00142</dd>
    </dl>
</div>

<div class="inc-timeline">
    <div class="inc-timeline__item">...</div>
</div>

<div class="inc-file-dropzone">...</div>
<div class="inc-bulk-bar">...</div>

Auto Refresh Widget

Use the inline modifier inside cards or toolbars, and the base class when you want the widget pinned to the page corner.

Queue refresh in 180s 
<div class="inc-auto-refresh"
     data-inc-auto-refresh
     data-inc-refresh-seconds="30"
     data-inc-refresh-label="Refresh in"
     data-inc-refresh-loading-label="Refreshing">
    <button class="inc-btn inc-btn--secondary inc-btn--micro inc-auto-refresh__toggle"
            type="button"
            data-inc-action="auto-refresh-toggle"
            aria-label="Pause"
            aria-pressed="false">
        <span class="inc-auto-refresh__toggle-icon" aria-hidden="true"></span>
        <span class="inc-auto-refresh__toggle-text">Pause</span>
    </button>
    <span class="inc-auto-refresh__countdown">
        <span class="inc-auto-refresh__label">Refresh in</span>
        <span class="inc-auto-refresh__value">30s</span>
    </span>
    <span class="inc-auto-refresh__status" role="status" aria-live="polite" aria-atomic="true" hidden>
        <span class="inc-auto-refresh__spinner" aria-hidden="true">
            <span class="inc-spinner inc-spinner--border inc-spinner--border--sm inc-spinner--border--primary"></span>
            <span class="inc-spinner inc-spinner--grow inc-spinner--grow--sm inc-spinner--grow--primary"></span>
        </span>
        <span class="inc-auto-refresh__status-text">Refreshing</span>
    </span>
</div>

<div class="inc-auto-refresh inc-auto-refresh--inline"
     data-inc-auto-refresh
     data-inc-refresh-seconds="90">
    ...
</div>

Reference Dialog

Native dialog example for copy/paste use.

This is the minimal dialog shell used on the native page. Copy the outer <dialog>, the surface wrapper, and the form-based footer if you want native close behavior.

Reference Drawer

Native side sheet example for assignment and note-taking flows.

Record
AP-2026-00142
Current owner
AP Team