Monthly revenue
€48,240
Up 12.4%Responsive Application Shell
A responsive application shell composed from a navbar, drawer, breadcrumbs and page actions.
Adapt navigation to the viewport
Keep the current location and page actions in the main region, show persistent navigation on wider screens and move the same destinations into a modal drawer on smaller screens.
Analytics overview
Updated today at 09:42
Active customers
1,284
42 new<section class="card shadow-sm overflow-hidden" aria-labelledby="page-title">
<nav class="navbar bg-inverse" aria-label="Workspace toolbar">
<div class="d-flex align-items-center gap-2 w-100 px-3">
<button
class="icon-btn icon-btn-text text-inverse d-md-none"
type="button"
aria-label="Open workspace navigation"
aria-controls="workspace-drawer"
aria-expanded="false">
<!-- menu icon -->
</button>
<a class="navbar-logo" href="#main-content">Acme Cloud</a>
</div>
</nav>
<div class="grid">
<aside class="col-md-3 d-none d-md-block bg-surface-hover border-end p-3">
<nav class="list border-0" aria-label="Workspace navigation">
<a class="list-item list-item-action is-active" href="#main-content" aria-current="page">Overview</a>
<a class="list-item list-item-action" href="#main-content">Reports</a>
<a class="list-item list-item-action" href="#main-content">Customers</a>
</nav>
</aside>
<main class="col-12 col-md-9 p-3" id="main-content" tabindex="-1">
<nav aria-label="Application breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#main-content">Workspace</a></li>
<li class="breadcrumb-item"><a href="#main-content">Analytics</a></li>
<li class="breadcrumb-item is-active" aria-current="page">Overview</li>
</ol>
</nav>
<header class="d-flex flex-column flex-sm-row align-items-sm-center gap-3">
<h3 class="flex-fill" id="page-title">Analytics overview</h3>
<div class="d-flex flex-column flex-sm-row gap-2" aria-label="Page actions">
<button class="btn btn-outline btn-secondary" type="button">Export</button>
<button class="btn btn-solid btn-primary" type="button">New report</button>
</div>
</header>
</main>
</div>
</section>
<div
class="drawer"
id="workspace-drawer"
role="dialog"
aria-modal="true"
aria-labelledby="workspace-drawer-title"
aria-hidden="true"
inert>
<div class="drawer-header">
<p class="drawer-title" id="workspace-drawer-title">Acme Cloud navigation</p>
<button class="icon-btn" type="button" aria-label="Close workspace navigation"><!-- close icon --></button>
</div>
<div class="drawer-body">
<nav class="list border-0" aria-label="Mobile workspace navigation"><!-- same destinations --></nav>
</div>
</div>
<div class="overlay" aria-hidden="true"></div>
<!-- Toggle .is-open and synchronize aria-expanded, aria-hidden, inert and focus in JavaScript. -->