REVACSS / COMPLETE WEBSITES

A clearer view of your workspace.

A responsive dashboard with metrics, native SVG charts, project progress and activity. Explore the same shared defaults as the marketing demo.

Workspace overviewView report

YOUR WORK, AT A GLANCE

A little clarity goes a long way.

Welcome back, Alex. Here’s how September came together.

September 2026
Compact navigation example
Total revenue
€42,500
Up 8.4% versus August
Recognised revenue this month
Active projects
24
4 more versus August
Across 6 working teams
Completed tasks
186
Up 12.0% versus August
166 completed in August
Team utilisation
78%
Target range: 70–85%
Room for the next opportunity

STEADY MOMENTUM

Revenue over time

EUR · Apr–Sep
Monthly revenue, April to September 2026Revenue rises from 28,400 euros in April to 42,500 euros in September, with a dip in June. Exact values are in the table below.10k20k30k40kAprMayJunJulAugSep
Six months of recognised revenue.
View revenue data
Monthly revenue in euros, 2026
MonthRevenue
Apr€28,400
May€32,100
Jun€29,700
Jul€36,800
Aug€39,200
Sep€42,500

HOW PEOPLE FIND US

Revenue by channel

Revenue share by channelDirect 55 percent, partners 30 percent, referrals 15 percent.€42.5kTOTAL REVENUE
Share of September revenue
Direct
55%
Partners
30%
Referrals
15%

KEEP THE NEXT STEP CLOSE

Projects in focus

4 highlighted projects
Sample projects · progress and upcoming deadlines
ProjectOwnerStatusProgressDue
Alex MorganIn progress
72%72%
Sam RiveraIn review
90%90%
Jamie ChenIn progress
48%48%
Taylor ReedComplete
100%100%

THE SMALL STEPS ADD UP

Latest activity

  1. Sam shared the workspace refresh.

    Ready for the team’s review.

  2. Jamie welcomed two new partners.

    Onboarding has started.

  3. Taylor completed the September report.

    The month’s results are ready.

LOOKING AHEAD

A good week starts with a clear plan.

The workspace refresh is ready for review. Make room for feedback before Thursday.

Review the projects

All names, figures and activity are fictional demonstration data.

Preview dashboard without data

Revenue forecast

No forecast data yet

A chart will appear once a reporting period is available.

Forecast revenue
Unavailable
No forecast has been supplied. This is not a zero value.

Make this dashboard yours.

All figures are fictional. A backend can render the metric values, table rows and SVG coordinates directly into this HTML. Links navigate within the demo; they do not create or change records.

View complete starting HTML
HTMLSelect text to copy
<!DOCTYPE html>
<html lang="en" data-theme="auto" data-palette="default" data-material="solid" data-shape="rounded">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forma Studio · RevaCSS dashboard demo</title>
<script id="reva-settings-schema" type="application/json">{"kind":"demo","values":{"theme":["auto","light","dark"],"palette":["default","mono","sand","ocean","cobalt","citrus","violet","forest"],"material":["solid","glass","veil","soft"],"shape":["square","subtle","rounded","pill"],"motion":["none","subtle","expressive"],"edge":["plain","gradient","shine","animated"],"density":["compact","comfortable","spacious"],"depth":["flat","subtle","pronounced"],"fill":["gradient","solid"],"type":["compact","standard","large"],"size":["small","medium","large"],"border":["subtle","defined","none"],"width":["narrow","standard","wide"],"navbar":["standard","centered","floating","split"],"contrast":["auto","more"]}}</script>
<script id="reva-settings-runtime" src="/RevaCSS/settings.js?v=f9ab880ccb15b9eb488ca65ef2ad687a4870aa28">
</script>
<meta name="description" content="A fictional team workspace dashboard built with native HTML, CSS and SVG.">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva-fonts.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.motion.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.selects.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.glass.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.veil.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.soft.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/demos/dashboard.css">
</head>
<body class="dash-site">
<a class="skip-link" href="#dashboard-title">Skip to dashboard</a>
<div class="app-shell">
<aside aria-label="Workspace sidebar">
<header>
<a href="#dashboard-title">forma.</a>
<small>Studio workspace</small>
</header>
<nav aria-label="Dashboard sections">
<a href="#dashboard-title" aria-current="page">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m3 10 9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
<path d="M9 21v-8h6v8"/>
</svg>Overview</a>
<a href="#dashboard-revenue">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="5" width="18" height="16" rx="3"/>
<path d="M7 3v4M17 3v4M3 10h18M7 14h2m6 0h2m-10 4h2"/>
</svg>Performance</a>
<a href="#dashboard-projects">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 7V5a2 2 0 0 1 2-2h5l3 4h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
</svg>Projects</a>
<a href="#dashboard-activity">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<path d="M12 7v5l4 2"/>
</svg>Activity</a>
<details>
<summary>Workspace</summary>
<a href="#dashboard-projects">Project overview</a>
<a href="#dashboard-activity">Team activity</a>
</details>
</nav>
<article class="card dash-note">
<p class="dash-eyebrow">A LITTLE MORE FOCUS</p>
<h2>Room for good work.</h2>
<p>A clear view of your team’s next steps.</p>
<a href="https://eristavi.github.io/RevaCSS/demos/marketing/">Explore Forma <span aria-hidden="true">↗</span>
</a>
</article>
<footer>
<strong>Alex Morgan</strong>
<br>
<small>Workspace admin</small>
</footer>
</aside>
<aside id="dashboard-sidebar" popover="auto" aria-label="Workspace drawer">
<button type="button" popovertarget="dashboard-sidebar" popovertargetaction="hide">Close sidebar</button>
<header>
<a href="#dashboard-title">forma.</a>
<small>Studio workspace</small>
</header>
<nav aria-label="Dashboard sections">
<a href="#dashboard-title" aria-current="page">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m3 10 9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
<path d="M9 21v-8h6v8"/>
</svg>Overview</a>
<a href="#dashboard-revenue">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="5" width="18" height="16" rx="3"/>
<path d="M7 3v4M17 3v4M3 10h18M7 14h2m6 0h2m-10 4h2"/>
</svg>Performance</a>
<a href="#dashboard-projects">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 7V5a2 2 0 0 1 2-2h5l3 4h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
</svg>Projects</a>
<a href="#dashboard-activity">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<path d="M12 7v5l4 2"/>
</svg>Activity</a>
<details>
<summary>Workspace</summary>
<a href="#dashboard-projects">Project overview</a>
<a href="#dashboard-activity">Team activity</a>
</details>
</nav>
<article class="card dash-note">
<p class="dash-eyebrow">A LITTLE MORE FOCUS</p>
<h2>Room for good work.</h2>
<p>A clear view of your team’s next steps.</p>
<a href="https://eristavi.github.io/RevaCSS/demos/marketing/">Explore Forma <span aria-hidden="true">↗</span>
</a>
</article>
<footer>
<strong>Alex Morgan</strong>
<br>
<small>Workspace admin</small>
</footer>
</aside>
<header>
<button type="button" class="outline" popovertarget="dashboard-sidebar" aria-label="Open sidebar">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<strong>Workspace overview</strong>
<a class="button outline" href="#dashboard-report" aria-label="View report">
<span>View report</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 12h16m-7-7 7 7-7 7"/>
</svg>
</a>
</header>
<main aria-label="Dashboard content">
<header class="dash-heading row justify-between">
<div>
<p class="dash-eyebrow">YOUR WORK, AT A GLANCE</p>
<h1 id="dashboard-title">A little clarity goes a long way.</h1>
<p>Welcome back, Alex. Here’s how September came together.</p>
</div>
<span class="badge">September 2026</span>
</header>
<details>
<summary>Compact navigation example</summary>
<nav class="nav-rail" aria-label="Compact dashboard navigation">
<a href="#dashboard-title">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m3 10 9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
<path d="M9 21v-8h6v8"/>
</svg>Overview</a>
<a href="#dashboard-revenue">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="5" width="18" height="16" rx="3"/>
<path d="M7 3v4M17 3v4M3 10h18M7 14h2m6 0h2m-10 4h2"/>
</svg>Performance</a>
<a href="#dashboard-projects">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 7V5a2 2 0 0 1 2-2h5l3 4h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
</svg>Projects</a>
<a href="#dashboard-activity">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<path d="M12 7v5l4 2"/>
</svg>Activity</a>
</nav>
</details>
<section class="dash-metrics" aria-label="September metrics">
<article class="card">
<dl>
<dt>Total revenue</dt>
<dd>
<output>€42,500</output>
</dd>
<dd>Up 8.4% versus August</dd>
<dd>
<small>Recognised revenue this month</small>
</dd>
</dl>
</article>
<article class="card">
<dl>
<dt>Active projects</dt>
<dd>
<output>24</output>
</dd>
<dd>4 more versus August</dd>
<dd>
<small>Across 6 working teams</small>
</dd>
</dl>
</article>
<article class="card">
<dl>
<dt>Completed tasks</dt>
<dd>
<output>186</output>
</dd>
<dd>Up 12.0% versus August</dd>
<dd>
<small>166 completed in August</small>
</dd>
</dl>
</article>
<article class="card">
<dl>
<dt>Team utilisation</dt>
<dd>
<output>78%</output>
</dd>
<dd>Target range: 70–85%</dd>
<dd>
<small>Room for the next opportunity</small>
</dd>
</dl>
</article>
</section>
<div class="dash-charts">
<section class="card" id="dashboard-revenue" aria-labelledby="revenue-heading">
<header class="row justify-between">
<div>
<p class="dash-eyebrow">STEADY MOMENTUM</p>
<h2 id="revenue-heading">Revenue over time</h2>
</div>
<span class="badge">EUR · Apr–Sep</span>
</header>
<figure class="chart">
<svg viewBox="0 0 540 210" role="img" aria-labelledby="revenue-svg-title revenue-svg-desc">
<title id="revenue-svg-title">Monthly revenue, April to September 2026</title>
<desc id="revenue-svg-desc">Revenue rises from 28,400 euros in April to 42,500 euros in September, with a dip in June. Exact values are in the table below.</desc>
<g>
<line x1="50" x2="500" y1="150" y2="150">
</line>
<text x="0" y="154">10k</text>
</g>
<g>
<line x1="50" x2="500" y1="110" y2="110">
</line>
<text x="0" y="114">20k</text>
</g>
<g>
<line x1="50" x2="500" y1="70" y2="70">
</line>
<text x="0" y="74">30k</text>
</g>
<g>
<line x1="50" x2="500" y1="30" y2="30">
</line>
<text x="0" y="34">40k</text>
</g>
<polygon points="50,190 50,76.4 140,61.599999999999994 230,71.2 320,42.80000000000001 410,33.19999999999999 500,20 500,190">
</polygon>
<polyline points="50,76.4 140,61.599999999999994 230,71.2 320,42.80000000000001 410,33.19999999999999 500,20">
</polyline>
<circle cx="50" cy="76.4" r="4">
</circle>
<circle cx="140" cy="61.599999999999994" r="4">
</circle>
<circle cx="230" cy="71.2" r="4">
</circle>
<circle cx="320" cy="42.80000000000001" r="4">
</circle>
<circle cx="410" cy="33.19999999999999" r="4">
</circle>
<circle cx="500" cy="20" r="4">
</circle>
<text x="50" y="208" text-anchor="middle">Apr</text>
<text x="140" y="208" text-anchor="middle">May</text>
<text x="230" y="208" text-anchor="middle">Jun</text>
<text x="320" y="208" text-anchor="middle">Jul</text>
<text x="410" y="208" text-anchor="middle">Aug</text>
<text x="500" y="208" text-anchor="middle">Sep</text>
</svg>
<figcaption>Six months of recognised revenue.</figcaption>
</figure>
<details id="dashboard-report">
<summary>View revenue data</summary>
<div class="table-scroll" tabindex="0" role="region" aria-label="Revenue data">
<table>
<caption>Monthly revenue in euros, 2026</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Apr</th>
<td>€28,400</td>
</tr>
<tr>
<th scope="row">May</th>
<td>€32,100</td>
</tr>
<tr>
<th scope="row">Jun</th>
<td>€29,700</td>
</tr>
<tr>
<th scope="row">Jul</th>
<td>€36,800</td>
</tr>
<tr>
<th scope="row">Aug</th>
<td>€39,200</td>
</tr>
<tr>
<th scope="row">Sep</th>
<td>€42,500</td>
</tr>
</tbody>
</table>
</div>
</details>
</section>
<section class="card" aria-labelledby="channels-heading">
<p class="dash-eyebrow">HOW PEOPLE FIND US</p>
<h2 id="channels-heading">Revenue by channel</h2>
<figure class="chart">
<svg viewBox="0 0 160 160" role="img" aria-labelledby="channels-svg-title channels-svg-desc">
<title id="channels-svg-title">Revenue share by channel</title>
<desc id="channels-svg-desc">Direct 55 percent, partners 30 percent, referrals 15 percent.</desc>
<circle style="--re-chart-color: var(--re-primary)" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="55 45" stroke-dashoffset="0">
</circle>
<circle style="--re-chart-color: color-mix(in srgb,var(--re-primary) 55%,var(--re-surface))" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="30 70" stroke-dashoffset="-55">
</circle>
<circle style="--re-chart-color: color-mix(in srgb,var(--re-primary) 25%,var(--re-surface))" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="15 85" stroke-dashoffset="-85">
</circle>
<text x="80" y="77" text-anchor="middle" style="font-size:19px">€42.5k</text>
<text x="80" y="96" text-anchor="middle" style="font-size:7px;letter-spacing:.6px">TOTAL REVENUE</text>
</svg>
<figcaption>Share of September revenue</figcaption>
</figure>
<dl class="dash-legend">
<div>
<dt>
<span class="dash-swatch dash-series-1" aria-hidden="true">
</span>Direct</dt>
<dd>55%</dd>
</div>
<div>
<dt>
<span class="dash-swatch dash-series-2" aria-hidden="true">
</span>Partners</dt>
<dd>30%</dd>
</div>
<div>
<dt>
<span class="dash-swatch dash-series-3" aria-hidden="true">
</span>Referrals</dt>
<dd>15%</dd>
</div>
</dl>
</section>
</div>
<section class="card" id="dashboard-projects" aria-labelledby="projects-heading">
<header class="row justify-between">
<div>
<p class="dash-eyebrow">KEEP THE NEXT STEP CLOSE</p>
<h2 id="projects-heading">Projects in focus</h2>
</div>
<span class="badge">4 highlighted projects</span>
</header>
<div class="table-scroll" tabindex="0" role="region" aria-label="Projects table">
<table>
<caption>Sample projects · progress and upcoming deadlines</caption>
<thead>
<tr>
<th scope="col">Project</th>
<th scope="col">Owner</th>
<th scope="col">Status</th>
<th scope="col">Progress</th>
<th scope="col">Due</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<button type="button" popovertarget="project-inspector-0">Autumn campaign</button>
</th>
<td>
<span class="row dash-owner">
<span class="avatar" aria-hidden="true">AM</span>Alex Morgan</span>
</td>
<td>
<span class="badge" data-variant="primary">In progress</span>
</td>
<td>
<div class="dash-progress">
<progress value="72" max="100" aria-label="Autumn campaign completion">72%</progress>
<span>72%</span>
</div>
</td>
<td>
<time datetime="2026-10-12">Oct 12</time>
</td>
</tr>
<tr>
<th scope="row">
<button type="button" popovertarget="project-inspector-1">Workspace refresh</button>
</th>
<td>
<span class="row dash-owner">
<span class="avatar" aria-hidden="true">SR</span>Sam Rivera</span>
</td>
<td>
<span class="badge" data-variant="warning">In review</span>
</td>
<td>
<div class="dash-progress">
<progress value="90" max="100" aria-label="Workspace refresh completion">90%</progress>
<span>90%</span>
</div>
</td>
<td>
<time datetime="2026-10-08">Oct 08</time>
</td>
</tr>
<tr>
<th scope="row">
<button type="button" popovertarget="project-inspector-2">Partner onboarding</button>
</th>
<td>
<span class="row dash-owner">
<span class="avatar" aria-hidden="true">JC</span>Jamie Chen</span>
</td>
<td>
<span class="badge" data-variant="primary">In progress</span>
</td>
<td>
<div class="dash-progress">
<progress value="48" max="100" aria-label="Partner onboarding completion">48%</progress>
<span>48%</span>
</div>
</td>
<td>
<time datetime="2026-10-18">Oct 18</time>
</td>
</tr>
<tr>
<th scope="row">
<button type="button" popovertarget="project-inspector-3">September report</button>
</th>
<td>
<span class="row dash-owner">
<span class="avatar" aria-hidden="true">TR</span>Taylor Reed</span>
</td>
<td>
<span class="badge" data-variant="success">Complete</span>
</td>
<td>
<div class="dash-progress">
<progress value="100" max="100" aria-label="September report completion">100%</progress>
<span>100%</span>
</div>
</td>
<td>
<time datetime="2026-10-02">Oct 02</time>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<div class="dash-bottom">
<section class="card" id="dashboard-activity" aria-labelledby="activity-heading">
<p class="dash-eyebrow">THE SMALL STEPS ADD UP</p>
<h2 id="activity-heading">Latest activity</h2>
<ol class="timeline">
<li>
<p>
<strong>Sam shared the workspace refresh.</strong>
</p>
<p>Ready for the team’s review.</p>
<time datetime="2026-10-03T09:40:00+03:00">October 3 · 09:40</time>
</li>
<li>
<p>
<strong>Jamie welcomed two new partners.</strong>
</p>
<p>Onboarding has started.</p>
<time datetime="2026-10-03T08:15:00+03:00">October 3 · 08:15</time>
</li>
<li>
<p>
<strong>Taylor completed the September report.</strong>
</p>
<p>The month’s results are ready.</p>
<time datetime="2026-10-02T16:30:00+03:00">October 2 · 16:30</time>
</li>
</ol>
</section>
<section class="card dash-summary" aria-labelledby="next-heading">
<p class="dash-eyebrow">LOOKING AHEAD</p>
<h2 id="next-heading">A good week starts with a clear plan.</h2>
<p>The workspace refresh is ready for review. Make room for feedback before Thursday.</p>
<a class="button" href="#dashboard-projects">Review the projects <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 12h16m-7-7 7 7-7 7"/>
</svg>
</a>
<p>
<small>All names, figures and activity are fictional demonstration data.</small>
</p>
</section>
</div>
<details>
<summary>Preview dashboard without data</summary>
<div class="grid">
<section class="card">
<h2>Revenue forecast</h2>
<div class="empty-state">
<h3>No forecast data yet</h3>
<p>A chart will appear once a reporting period is available.</p>
</div>
</section>
<article class="card">
<dl>
<dt>Forecast revenue</dt>
<dd>
<output>Unavailable</output>
</dd>
<dd>
<small>No forecast has been supplied. This is not a zero value.</small>
</dd>
</dl>
</article>
</div>
</details>
<footer class="dash-footer row justify-between">
<small>Forma Studio · Sample workspace</small>
<a href="https://eristavi.github.io/RevaCSS/reference/components/">Built with RevaCSS</a>
</footer>
<aside class="drawer" id="project-inspector-0" popover="auto" aria-labelledby="project-title-0">
<header>
<h2 id="project-title-0">Autumn campaign</h2>
<button type="button" popovertarget="project-inspector-0" popovertargetaction="hide" autofocus>Close</button>
</header>
<section>
<p>Project details</p>
<dl>
<dt>Owner</dt>
<dd>Alex Morgan</dd>
<dt>Status</dt>
<dd>In progress</dd>
<dt>Due</dt>
<dd>
<time datetime="2026-10-12">Oct 12, 2026</time>
</dd>
</dl>
<label>Completion <progress value="72" max="100">72%</progress>
</label>
<p>72% complete</p>
<p>Sample project information for this demonstration.</p>
</section>
<footer>
<button type="button" popovertarget="project-inspector-0" popovertargetaction="hide">Back to dashboard</button>
</footer>
</aside>
<aside class="drawer" id="project-inspector-1" popover="auto" aria-labelledby="project-title-1">
<header>
<h2 id="project-title-1">Workspace refresh</h2>
<button type="button" popovertarget="project-inspector-1" popovertargetaction="hide" autofocus>Close</button>
</header>
<section>
<p>Project details</p>
<dl>
<dt>Owner</dt>
<dd>Sam Rivera</dd>
<dt>Status</dt>
<dd>In review</dd>
<dt>Due</dt>
<dd>
<time datetime="2026-10-08">Oct 08, 2026</time>
</dd>
</dl>
<label>Completion <progress value="90" max="100">90%</progress>
</label>
<p>90% complete</p>
<p>Sample project information for this demonstration.</p>
</section>
<footer>
<button type="button" popovertarget="project-inspector-1" popovertargetaction="hide">Back to dashboard</button>
</footer>
</aside>
<aside class="drawer" id="project-inspector-2" popover="auto" aria-labelledby="project-title-2">
<header>
<h2 id="project-title-2">Partner onboarding</h2>
<button type="button" popovertarget="project-inspector-2" popovertargetaction="hide" autofocus>Close</button>
</header>
<section>
<p>Project details</p>
<dl>
<dt>Owner</dt>
<dd>Jamie Chen</dd>
<dt>Status</dt>
<dd>In progress</dd>
<dt>Due</dt>
<dd>
<time datetime="2026-10-18">Oct 18, 2026</time>
</dd>
</dl>
<label>Completion <progress value="48" max="100">48%</progress>
</label>
<p>48% complete</p>
<p>Sample project information for this demonstration.</p>
</section>
<footer>
<button type="button" popovertarget="project-inspector-2" popovertargetaction="hide">Back to dashboard</button>
</footer>
</aside>
<aside class="drawer" id="project-inspector-3" popover="auto" aria-labelledby="project-title-3">
<header>
<h2 id="project-title-3">September report</h2>
<button type="button" popovertarget="project-inspector-3" popovertargetaction="hide" autofocus>Close</button>
</header>
<section>
<p>Project details</p>
<dl>
<dt>Owner</dt>
<dd>Taylor Reed</dd>
<dt>Status</dt>
<dd>Complete</dd>
<dt>Due</dt>
<dd>
<time datetime="2026-10-02">Oct 02, 2026</time>
</dd>
</dl>
<label>Completion <progress value="100" max="100">100%</progress>
</label>
<p>100% complete</p>
<p>Sample project information for this demonstration.</p>
</section>
<footer>
<button type="button" popovertarget="project-inspector-3" popovertargetaction="hide">Back to dashboard</button>
</footer>
</aside>
</main>
</div>
</body>
</html>

The optional settings helper includes your current selections in the download. Without JavaScript, copy the selected attributes onto the starting document’s opening HTML tag. Download the linked CSS assets and update paths for a self-hosted project.

Dashboard composition and chart styles live in dashboard.css. The existing line/area and doughnut charts now use the reusable chart module; dashboard.css only supplies page composition and legend styling.