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.

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>

Badges And Alerts

Approved Pending Rejected Imported
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--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
+

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>

<div class="inc-empty-state">
    <div class="inc-empty-state__content">
        <div class="inc-empty-state__icon">+</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>

Tables And Lists

Project Period Amount Status
AP-2026-00142 March 2026 $18,240.22 Approved
Needs Review March Closeout Projects Missing Billing Period
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-vertical-list inc-vertical-list--compact inc-vertical-list--trim">
    <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>

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">
    <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.

i

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">#</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.

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">
    <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--border inc-spinner--border--sm inc-spinner--border--primary"></span>
        </span>
        <span class="inc-auto-refresh__status-text">Refreshing</span>
    </span>
    <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-text">Pause</span>
    </button>
</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