Layout shell

The casca-extended-layout primitives — .casca-card, .casca-card-grid, .casca-toolbar, and .casca-anchor-nav — are the no-JS page scaffolding you build a dashboard FROM. Tabs are the existing .casca-switch with data-variant="tabs" (no separate primitive). Everything below is plain HTML + CSS, zero JavaScript.

Toolbar + tabs

1,240 today
8,300 this week
31,000 this month
Live ✓ Synced

Anchor-nav + card-grid

Revenue

This month $48.2k +12.4%
Updated 5 min ago

By channel

Health

92%

Markup

<div class="casca-toolbar" data-align="between">
  <div class="casca-switch" data-variant="tabs"> ...segmented tabs... </div>
  <div class="casca-toolbar-group"> ...actions... </div>
</div>

<nav class="casca-anchor-nav" aria-label="On this page" data-sticky>
  <a class="casca-anchor-nav-link" href="#kpis" aria-current="true">KPIs</a>
  <a class="casca-anchor-nav-link" href="#channels">Channels</a>
</nav>

<div class="casca-card-grid">
  <article class="casca-card"> ... </article>
  <!-- ... -->
</div>