Dashboard Pattern
Summary blocks, filter toolbar, alerts, tabs, tables, and a trimmed vertical list with normal breathing room.
Optional Layer
This dashboard stays CSS-first and helper-driven. Use the dedicated Web Components page when you want the same design language in plain HTML and JavaScript.
Plain HTML / CSS-first
This page keeps the HTML explicit: the structure, classes, and native table markup are all visible at a glance.
<section class="inc-card">
<div class="inc-card__header">
<h2 class="inc-card__title">Queue summary</h2>
</div>
<div class="inc-card__body">
<table class="inc-table inc-table--sm inc-table--data-table">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
</section>Web Components counterpart
The Web Component layer keeps the same visual language but moves the repeated wrapping into slots and attributes.
<inc-card>
<div slot="header" class="inc-card__header">
<h2 class="inc-card__title">Queue summary</h2>
</div>
<div slot="body">
<table class="inc-table inc-table--sm inc-table--data-table">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
</inc-card>Across all active projects and pay app packages.
Inline field wrappers keep labels and controls stable while still allowing the toolbar to wrap cleanly.
Create a named filter set so your operators can reuse it across screens.