Dashboard with charts and a data table
A dashboard with sidebar, charts and data table.
Preview
Built with
The components this screen renders, through their own templates. Changing one of them, or a token they read, changes this screen.
Design system gaps
What the design system lacks to render the original as it is. The screen fills each gap with native HTML on semantic tokens until a component or a token covers it.
- The sidebar navigation (groups, items, sub-items, current item) is native HTML on semantic tokens: there is no Navigation component yet.
- Collapsing the sidebar (off canvas or to an icon rail) has no pattern without script yet.
- Per-item action menus are Dropdowns with a visible "More" label: the Dropdown has no icon-only trigger.
- KPI and chart cards: the Card has no content, action or footer part, so the value, the badge and the footer lines are placed inside the Card root.
- The chart is a static SVG colored with the data visualisation tokens: there is no Chart component or data visualisation foundation.
- Tabs over the table are links with aria-current: there is no Tabs component.
- The data table is a native table on semantic tokens: there is no Table component.
- The Dropdown has no checkbox items (Customize Columns).
- Form controls inside table cells need a visually hidden label: Text field and Select always show theirs.
- The Badge has no icon (trend arrows, status icons).
Changes from the original
- The sidebar does not collapse off canvas (that needs script): it is always shown on wide screens and stacks above the content on narrow ones. The sidebar trigger and its separator are dropped.
- The time range of the chart is a Radio group: each option shows its own pre-rendered chart (CSS :has(), no script). The original switches a toggle group to a select on narrow screens.
- The chart has no tooltip on hover (it needs script); a visually hidden summary gives the totals of the range.
- The table shows its first 10 rows, statically: no drag and drop reordering, no sorting, no "select all", no column hiding. Pagination is links.
- The row checkbox is labelled by the section header; the header link that opens an edit drawer is dropped (no Dialog or Drawer yet).
- Target, Limit and Reviewer are read-only values instead of inline fields and selects: the Text field and the Select have no visually hidden label.
- The "Customize Columns" menu lists the columns with a check icon instead of checkbox items.
- KPI trends are words and an icon in a neutral Badge, as in the original.
- Rebuilt as static HTML with the design system's component templates; every color, type style, radius, border and spacing comes from its tokens.
- The original visual design (Tailwind classes, the Geist font) is not reused.
- Lucide and Tabler icons are remapped to Material Symbols; brand logos (Apple, Google, GitHub, Meta) are dropped, the buttons keep their text.
- Placeholder images are drawn with semantic tokens.
- No script: behaviour that needs JavaScript (collapsing the sidebar, toasts, drag and drop, client-side tables) is dropped or simplified, and each screen says so.
Code
The HTML the screen renders, from apps/docs/screens/shadcn-ui/dashboard-01.screen.mjs, with the stylesheets of @quantum-ds/tokens, the reference implementation (packages/components/src/) and apps/docs/screens/screens.css.
HTML
<div class="scr-viewport">
<div class="scr-screen">
<div class="scr-shell" data-variant="inset" data-side="left">
<nav class="scr-sidebar" aria-label="Main">
<div class="scr-sidebar__header">
<a class="scr-brand" href="#">
<span class="scr-brand__mark">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>contrast</span>
</span>
Acme Inc.
</a>
</div>
<div class="scr-sidebar__content">
<div class="scr-row scr-quick">
<button
type="button"
class="ds-button"
data-emphasis="accent"
data-intent="neutral"
data-size="small"
>
<span
class="ds-button__icon"
data-part="icon"
data-position="start"
aria-hidden="true"
>add_circle</span>
<span
class="ds-button__label"
data-part="label"
>Quick Create</span>
</button>
<button
type="button"
class="ds-icon-button"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
aria-label="Inbox"
>
<span
class="ds-icon-button__icon"
data-part="icon"
aria-hidden="true"
>mail</span>
</button>
</div>
<div class="scr-nav-group">
<ul class="scr-nav">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#" aria-current="page">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>dashboard</span>
<span class="scr-nav__label">Dashboard</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>list_alt</span>
<span class="scr-nav__label">Lifecycle</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>bar_chart</span>
<span class="scr-nav__label">Analytics</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>folder</span>
<span class="scr-nav__label">Projects</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>group</span>
<span class="scr-nav__label">Team</span>
</a>
</li>
</ul>
</div>
<div
class="scr-nav-group"
role="group"
aria-labelledby="dashboard-01-documents-label"
>
<p
class="scr-nav-group__label"
id="dashboard-01-documents-label"
>Documents</p>
<ul class="scr-nav">
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>database</span>
<span class="scr-nav__label">Data Library</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-document-0-trigger"
popovertarget="dashboard-01-document-0"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-document-0"
popover
aria-labelledby="dashboard-01-document-0-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-document-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>folder_open</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-document-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>share</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Share</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-document-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>lab_profile</span>
<span class="scr-nav__label">Reports</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-document-1-trigger"
popovertarget="dashboard-01-document-1"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-document-1"
popover
aria-labelledby="dashboard-01-document-1-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-document-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>folder_open</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-document-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>share</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Share</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-document-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>description</span>
<span class="scr-nav__label">Word Assistant</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-document-2-trigger"
popovertarget="dashboard-01-document-2"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-document-2"
popover
aria-labelledby="dashboard-01-document-2-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-document-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>folder_open</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-document-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>share</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Share</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-document-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="scr-push">
<div class="scr-nav-group">
<ul class="scr-nav">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>settings</span>
<span class="scr-nav__label">Settings</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>help</span>
<span class="scr-nav__label">Get Help</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>search</span>
<span class="scr-nav__label">Search</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="scr-sidebar__footer">
<div class="scr-identity">
<span
class="ds-avatar"
data-size="small"
data-shape="square"
aria-hidden="true"
>
<span
class="ds-avatar__initials"
data-part="initials"
aria-hidden="true"
>S</span>
</span>
<span class="scr-identity__text">
<span class="scr-identity__title">shadcn</span>
<span class="scr-identity__subtitle">m@example.com</span>
</span>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-user-trigger"
popovertarget="dashboard-01-user"
>
<span
class="ds-button__label"
data-part="label"
>Account</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-user"
popover
aria-labelledby="dashboard-01-user-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>auto_awesome</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Upgrade to Pro</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>verified</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Account</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>credit_card</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Billing</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>notifications</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Notifications</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>logout</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Log out</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="scr-main">
<header class="scr-header">
<h1 class="scr-title" data-size="small">Documents</h1>
<div class="scr-header__end">
<a
class="scr-link"
href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"
>GitHub</a>
</div>
</header>
<main class="scr-content scr-dashboard">
<h2 class="scr-sr">Key figures</h2>
<div class="scr-kpis">
<div class="ds-card" data-surface="level-1">
<h3
class="ds-card__title"
data-part="title"
>Total Revenue</h3>
<div class="scr-kpi">
<p class="scr-kpi__value">$1,250.00</p>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>+12.5%</span>
</span>
</div>
<p class="scr-kpi__headline">
Trending up this month
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>trending_up</span>
</p>
<p class="scr-muted">Visitors for the last 6 months</p>
</div>
<div class="ds-card" data-surface="level-1">
<h3
class="ds-card__title"
data-part="title"
>New Customers</h3>
<div class="scr-kpi">
<p class="scr-kpi__value">1,234</p>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>-20%</span>
</span>
</div>
<p class="scr-kpi__headline">
Down 20% this period
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>trending_down</span>
</p>
<p class="scr-muted">Acquisition needs attention</p>
</div>
<div class="ds-card" data-surface="level-1">
<h3
class="ds-card__title"
data-part="title"
>Active Accounts</h3>
<div class="scr-kpi">
<p class="scr-kpi__value">45,678</p>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>+12.5%</span>
</span>
</div>
<p class="scr-kpi__headline">
Strong user retention
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>trending_up</span>
</p>
<p class="scr-muted">Engagement exceed targets</p>
</div>
<div class="ds-card" data-surface="level-1">
<h3
class="ds-card__title"
data-part="title"
>Growth Rate</h3>
<div class="scr-kpi">
<p class="scr-kpi__value">4.5%</p>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>+4.5%</span>
</span>
</div>
<p class="scr-kpi__headline">
Steady performance increase
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>trending_up</span>
</p>
<p class="scr-muted">Meets growth projections</p>
</div>
</div>
<div class="ds-card" data-surface="level-1">
<h2
class="ds-card__title"
data-part="title"
>Total Visitors</h2>
<p
class="ds-card__description"
data-part="description"
>Visitors per day on desktop and mobile</p>
<div class="scr-chart">
<fieldset
class="ds-radio-group"
data-orientation="horizontal"
data-size="small"
>
<legend
class="ds-radio-group__legend"
data-part="legend"
>Time range</legend>
<ul class="ds-radio-group__options">
<li>
<div
class="ds-radio-group__option"
data-part="option"
>
<input
type="radio"
class="ds-radio-group__control"
data-part="control"
id="dashboard-01-range-1"
name="dashboard-01-range"
value="90d"
checked
>
<label
class="ds-radio-group__option-label"
data-part="option-label"
for="dashboard-01-range-1"
>Last 3 months</label>
</div>
</li>
<li>
<div
class="ds-radio-group__option"
data-part="option"
>
<input
type="radio"
class="ds-radio-group__control"
data-part="control"
id="dashboard-01-range-2"
name="dashboard-01-range"
value="30d"
>
<label
class="ds-radio-group__option-label"
data-part="option-label"
for="dashboard-01-range-2"
>Last 30 days</label>
</div>
</li>
<li>
<div
class="ds-radio-group__option"
data-part="option"
>
<input
type="radio"
class="ds-radio-group__control"
data-part="control"
id="dashboard-01-range-3"
name="dashboard-01-range"
value="7d"
>
<label
class="ds-radio-group__option-label"
data-part="option-label"
for="dashboard-01-range-3"
>Last 7 days</label>
</div>
</li>
</ul>
</fieldset>
<figure class="scr-chart__plot" data-range="90d">
<figcaption class="scr-sr">Stacked area chart of visitors per day, Apr 1 to Jun 30 2024: mobile 25,010, desktop 24,828 visitors.</figcaption>
<svg
class="scr-chart__svg"
viewBox="0 0 720 200"
preserveAspectRatio="none"
aria-hidden="true"
focusable="false"
>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="50"
y2="50"
></line>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="100"
y2="100"
></line>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="150"
y2="150"
></line>
<g class="scr-chart__series" data-series="1">
<path
class="scr-chart__area"
d="M0,173.2 C1.3,172.3 5.3,167 8,167.9 C10.7,168.7 13.3,180.9 16,178.6 C18.7,176.2 21.3,158.6 24,153.6 C26.7,148.5 29.3,150.6 32,148.2 C34.7,145.8 37.3,136 40,139.3 C42.7,142.5 45.3,167.3 48,167.9 C50.7,168.4 53.3,140.8 56,142.8 C58.7,144.9 61.3,176.5 64,180.4 C66.7,184.2 69.3,173.2 72,166.1 C74.7,158.9 77.3,138.1 80,137.5 C82.7,136.9 85.3,163.4 88,162.5 C90.7,161.6 93.3,132.4 96,132.1 C98.7,131.8 101.3,154.5 104,160.7 C106.7,167 109.3,168.7 112,169.6 C114.7,170.5 117.3,171.7 120,166.1 C122.7,160.4 125.3,142.3 128,135.7 C130.7,129.2 133.3,121.4 136,126.8 C138.7,132.1 141.3,160.1 144,167.9 C146.7,175.6 149.3,173.8 152,173.2 C154.7,172.6 157.3,164.9 160,164.3 C162.7,163.7 165.3,170.5 168,169.6 C170.7,168.7 173.3,162.5 176,158.9 C178.7,155.3 181.3,148.8 184,148.2 C186.7,147.6 189.3,150.6 192,155.3 C194.7,160.1 197.3,181.8 200,176.8 C202.7,171.7 205.3,126.5 208,125 C210.7,123.5 213.3,162.5 216,167.9 C218.7,173.2 221.3,163.1 224,157.1 C226.7,151.2 229.3,131.5 232,132.1 C234.7,132.7 237.3,158.6 240,160.7 C242.7,162.8 245.3,143.7 248,144.6 C250.7,145.5 253.3,169.3 256,166.1 C258.7,162.8 261.3,130.9 264,125 C266.7,119 269.3,133.3 272,130.3 C274.7,127.4 277.3,104.4 280,107.1 C282.7,109.8 285.3,137.2 288,146.4 C290.7,155.6 293.3,158.9 296,162.5 C298.7,166.1 301.3,171.4 304,167.9 C306.7,164.3 309.3,143.7 312,141.1 C314.7,138.4 317.3,149.1 320,151.8 C322.7,154.5 325.3,153.9 328,157.1 C330.7,160.4 333.3,178.9 336,171.4 C338.7,164 341.3,119 344,112.5 C346.7,105.9 349.3,129.5 352,132.1 C354.7,134.8 357.3,129.7 360,128.6 C362.7,127.4 365.3,123.5 368,125 C370.7,126.5 373.3,130.3 376,137.5 C378.7,144.6 381.3,164.3 384,167.9 C386.7,171.4 389.3,157.7 392,158.9 C394.7,160.1 397.3,171.7 400,175 C402.7,178.3 405.3,183 408,178.6 C410.7,174.1 413.3,151.2 416,148.2 C418.7,145.2 421.3,159.5 424,160.7 C426.7,161.9 429.3,153.9 432,155.3 C434.7,156.8 437.3,175.9 440,169.6 C442.7,163.4 445.3,118.4 448,117.8 C450.7,117.2 453.3,156.2 456,166.1 C458.7,175.9 461.3,179.5 464,176.8 C466.7,174.1 469.3,153 472,150 C474.7,147 477.3,156.5 480,158.9 C482.7,161.3 485.3,169.6 488,164.3 C490.7,158.9 493.3,125.6 496,126.8 C498.7,128 501.3,170.5 504,171.4 C506.7,172.3 509.3,131.5 512,132.1 C514.7,132.7 517.3,171.1 520,175 C522.7,178.9 525.3,162.2 528,155.3 C530.7,148.5 533.3,136 536,133.9 C538.7,131.8 541.3,146.1 544,142.8 C546.7,139.6 549.3,110.7 552,114.3 C554.7,117.8 557.3,154.5 560,164.3 C562.7,174.1 565.3,179.8 568,173.2 C570.7,166.7 573.3,124.4 576,125 C578.7,125.6 581.3,175.6 584,176.8 C586.7,178 589.3,138.7 592,132.1 C594.7,125.6 597.3,135.4 600,137.5 C602.7,139.6 605.3,149.7 608,144.6 C610.7,139.6 613.3,103 616,107.1 C618.7,111.3 621.3,162.8 624,169.6 C626.7,176.5 629.3,156.5 632,148.2 C634.7,139.9 637.3,117.2 640,119.6 C642.7,122 645.3,157.1 648,162.5 C650.7,167.9 653.3,161.3 656,151.8 C658.7,142.3 661.3,102.7 664,105.3 C666.7,108 669.3,157.7 672,167.9 C674.7,178 677.3,172 680,166.1 C682.7,160.1 685.3,141.1 688,132.1 C690.7,123.2 693.3,107.1 696,112.5 C698.7,117.8 701.3,154.5 704,164.3 C706.7,174.1 709.3,177.4 712,171.4 C714.7,165.5 718.7,135.7 720,128.6 L720,200 C718.7,200 714.7,200 712,200 C709.3,200 706.7,200 704,200 C701.3,200 698.7,200 696,200 C693.3,200 690.7,200 688,200 C685.3,200 682.7,200 680,200 C677.3,200 674.7,200 672,200 C669.3,200 666.7,200 664,200 C661.3,200 658.7,200 656,200 C653.3,200 650.7,200 648,200 C645.3,200 642.7,200 640,200 C637.3,200 634.7,200 632,200 C629.3,200 626.7,200 624,200 C621.3,200 618.7,200 616,200 C613.3,200 610.7,200 608,200 C605.3,200 602.7,200 600,200 C597.3,200 594.7,200 592,200 C589.3,200 586.7,200 584,200 C581.3,200 578.7,200 576,200 C573.3,200 570.7,200 568,200 C565.3,200 562.7,200 560,200 C557.3,200 554.7,200 552,200 C549.3,200 546.7,200 544,200 C541.3,200 538.7,200 536,200 C533.3,200 530.7,200 528,200 C525.3,200 522.7,200 520,200 C517.3,200 514.7,200 512,200 C509.3,200 506.7,200 504,200 C501.3,200 498.7,200 496,200 C493.3,200 490.7,200 488,200 C485.3,200 482.7,200 480,200 C477.3,200 474.7,200 472,200 C469.3,200 466.7,200 464,200 C461.3,200 458.7,200 456,200 C453.3,200 450.7,200 448,200 C445.3,200 442.7,200 440,200 C437.3,200 434.7,200 432,200 C429.3,200 426.7,200 424,200 C421.3,200 418.7,200 416,200 C413.3,200 410.7,200 408,200 C405.3,200 402.7,200 400,200 C397.3,200 394.7,200 392,200 C389.3,200 386.7,200 384,200 C381.3,200 378.7,200 376,200 C373.3,200 370.7,200 368,200 C365.3,200 362.7,200 360,200 C357.3,200 354.7,200 352,200 C349.3,200 346.7,200 344,200 C341.3,200 338.7,200 336,200 C333.3,200 330.7,200 328,200 C325.3,200 322.7,200 320,200 C317.3,200 314.7,200 312,200 C309.3,200 306.7,200 304,200 C301.3,200 298.7,200 296,200 C293.3,200 290.7,200 288,200 C285.3,200 282.7,200 280,200 C277.3,200 274.7,200 272,200 C269.3,200 266.7,200 264,200 C261.3,200 258.7,200 256,200 C253.3,200 250.7,200 248,200 C245.3,200 242.7,200 240,200 C237.3,200 234.7,200 232,200 C229.3,200 226.7,200 224,200 C221.3,200 218.7,200 216,200 C213.3,200 210.7,200 208,200 C205.3,200 202.7,200 200,200 C197.3,200 194.7,200 192,200 C189.3,200 186.7,200 184,200 C181.3,200 178.7,200 176,200 C173.3,200 170.7,200 168,200 C165.3,200 162.7,200 160,200 C157.3,200 154.7,200 152,200 C149.3,200 146.7,200 144,200 C141.3,200 138.7,200 136,200 C133.3,200 130.7,200 128,200 C125.3,200 122.7,200 120,200 C117.3,200 114.7,200 112,200 C109.3,200 106.7,200 104,200 C101.3,200 98.7,200 96,200 C93.3,200 90.7,200 88,200 C85.3,200 82.7,200 80,200 C77.3,200 74.7,200 72,200 C69.3,200 66.7,200 64,200 C61.3,200 58.7,200 56,200 C53.3,200 50.7,200 48,200 C45.3,200 42.7,200 40,200 C37.3,200 34.7,200 32,200 C29.3,200 26.7,200 24,200 C21.3,200 18.7,200 16,200 C13.3,200 10.7,200 8,200 C5.3,200 1.3,200 0,200 Z"
></path>
<path
class="scr-chart__line"
d="M0,173.2 C1.3,172.3 5.3,167 8,167.9 C10.7,168.7 13.3,180.9 16,178.6 C18.7,176.2 21.3,158.6 24,153.6 C26.7,148.5 29.3,150.6 32,148.2 C34.7,145.8 37.3,136 40,139.3 C42.7,142.5 45.3,167.3 48,167.9 C50.7,168.4 53.3,140.8 56,142.8 C58.7,144.9 61.3,176.5 64,180.4 C66.7,184.2 69.3,173.2 72,166.1 C74.7,158.9 77.3,138.1 80,137.5 C82.7,136.9 85.3,163.4 88,162.5 C90.7,161.6 93.3,132.4 96,132.1 C98.7,131.8 101.3,154.5 104,160.7 C106.7,167 109.3,168.7 112,169.6 C114.7,170.5 117.3,171.7 120,166.1 C122.7,160.4 125.3,142.3 128,135.7 C130.7,129.2 133.3,121.4 136,126.8 C138.7,132.1 141.3,160.1 144,167.9 C146.7,175.6 149.3,173.8 152,173.2 C154.7,172.6 157.3,164.9 160,164.3 C162.7,163.7 165.3,170.5 168,169.6 C170.7,168.7 173.3,162.5 176,158.9 C178.7,155.3 181.3,148.8 184,148.2 C186.7,147.6 189.3,150.6 192,155.3 C194.7,160.1 197.3,181.8 200,176.8 C202.7,171.7 205.3,126.5 208,125 C210.7,123.5 213.3,162.5 216,167.9 C218.7,173.2 221.3,163.1 224,157.1 C226.7,151.2 229.3,131.5 232,132.1 C234.7,132.7 237.3,158.6 240,160.7 C242.7,162.8 245.3,143.7 248,144.6 C250.7,145.5 253.3,169.3 256,166.1 C258.7,162.8 261.3,130.9 264,125 C266.7,119 269.3,133.3 272,130.3 C274.7,127.4 277.3,104.4 280,107.1 C282.7,109.8 285.3,137.2 288,146.4 C290.7,155.6 293.3,158.9 296,162.5 C298.7,166.1 301.3,171.4 304,167.9 C306.7,164.3 309.3,143.7 312,141.1 C314.7,138.4 317.3,149.1 320,151.8 C322.7,154.5 325.3,153.9 328,157.1 C330.7,160.4 333.3,178.9 336,171.4 C338.7,164 341.3,119 344,112.5 C346.7,105.9 349.3,129.5 352,132.1 C354.7,134.8 357.3,129.7 360,128.6 C362.7,127.4 365.3,123.5 368,125 C370.7,126.5 373.3,130.3 376,137.5 C378.7,144.6 381.3,164.3 384,167.9 C386.7,171.4 389.3,157.7 392,158.9 C394.7,160.1 397.3,171.7 400,175 C402.7,178.3 405.3,183 408,178.6 C410.7,174.1 413.3,151.2 416,148.2 C418.7,145.2 421.3,159.5 424,160.7 C426.7,161.9 429.3,153.9 432,155.3 C434.7,156.8 437.3,175.9 440,169.6 C442.7,163.4 445.3,118.4 448,117.8 C450.7,117.2 453.3,156.2 456,166.1 C458.7,175.9 461.3,179.5 464,176.8 C466.7,174.1 469.3,153 472,150 C474.7,147 477.3,156.5 480,158.9 C482.7,161.3 485.3,169.6 488,164.3 C490.7,158.9 493.3,125.6 496,126.8 C498.7,128 501.3,170.5 504,171.4 C506.7,172.3 509.3,131.5 512,132.1 C514.7,132.7 517.3,171.1 520,175 C522.7,178.9 525.3,162.2 528,155.3 C530.7,148.5 533.3,136 536,133.9 C538.7,131.8 541.3,146.1 544,142.8 C546.7,139.6 549.3,110.7 552,114.3 C554.7,117.8 557.3,154.5 560,164.3 C562.7,174.1 565.3,179.8 568,173.2 C570.7,166.7 573.3,124.4 576,125 C578.7,125.6 581.3,175.6 584,176.8 C586.7,178 589.3,138.7 592,132.1 C594.7,125.6 597.3,135.4 600,137.5 C602.7,139.6 605.3,149.7 608,144.6 C610.7,139.6 613.3,103 616,107.1 C618.7,111.3 621.3,162.8 624,169.6 C626.7,176.5 629.3,156.5 632,148.2 C634.7,139.9 637.3,117.2 640,119.6 C642.7,122 645.3,157.1 648,162.5 C650.7,167.9 653.3,161.3 656,151.8 C658.7,142.3 661.3,102.7 664,105.3 C666.7,108 669.3,157.7 672,167.9 C674.7,178 677.3,172 680,166.1 C682.7,160.1 685.3,141.1 688,132.1 C690.7,123.2 693.3,107.1 696,112.5 C698.7,117.8 701.3,154.5 704,164.3 C706.7,174.1 709.3,177.4 712,171.4 C714.7,165.5 718.7,135.7 720,128.6"
></path>
</g>
<g class="scr-chart__series" data-series="2">
<path
class="scr-chart__area"
d="M0,133.6 C1.3,136.4 5.3,148 8,150.5 C10.7,153.1 13.3,155.4 16,148.7 C18.7,142 21.3,121.5 24,110.3 C26.7,99.1 29.3,85.7 32,81.6 C34.7,77.4 37.3,78.4 40,85.5 C42.7,92.6 45.3,126.7 48,124.1 C50.7,121.5 53.3,62.2 56,69.8 C58.7,77.4 61.3,161.5 64,169.8 C66.7,178.1 69.3,134.6 72,119.4 C74.7,104.3 77.3,80.6 80,79.1 C82.7,77.6 85.3,111.7 88,110.3 C90.7,109 93.3,66.7 96,71 C98.7,75.4 101.3,123.4 104,136.2 C106.7,149.1 109.3,147.3 112,148.2 C114.7,149.1 117.3,156.8 120,141.4 C122.7,126.1 125.3,69.3 128,56 C130.7,42.8 133.3,50.4 136,61.8 C138.7,73.2 141.3,108.5 144,124.5 C146.7,140.4 149.3,154.8 152,157.3 C154.7,159.9 157.3,144.4 160,139.8 C162.7,135.2 165.3,130.6 168,129.6 C170.7,128.7 173.3,142.7 176,134.3 C178.7,125.8 181.3,82 184,79.1 C186.7,76.2 189.3,102.9 192,116.9 C194.7,131 197.3,173.4 200,163.4 C202.7,153.3 205.3,59.5 208,56.6 C210.7,53.7 213.3,138.7 216,146.1 C218.7,153.4 221.3,116.7 224,100.9 C226.7,85 229.3,46 232,51 C234.7,56.1 237.3,124.4 240,131.2 C242.7,138.1 245.3,93.9 248,92.3 C250.7,90.8 253.3,128 256,122 C258.7,115.9 261.3,69.1 264,56.2 C266.7,43.3 269.3,50.8 272,44.4 C274.7,38.1 277.3,12.7 280,18.2 C282.7,23.6 285.3,57.5 288,77.1 C290.7,96.7 293.3,127.5 296,135.9 C298.7,144.2 301.3,135.2 304,127.3 C306.7,119.4 309.3,94.6 312,88.7 C314.7,82.8 317.3,86.4 320,91.9 C322.7,97.5 325.3,114.6 328,122 C330.7,129.3 333.3,151.2 336,136.2 C338.7,121.3 341.3,47.2 344,32.5 C346.7,17.7 349.3,41.7 352,47.7 C354.7,53.6 357.3,70.2 360,68.2 C362.7,66.2 365.3,33.7 368,35.9 C370.7,38 373.3,66.2 376,81.2 C378.7,96.2 381.3,118.2 384,125.9 C386.7,133.6 389.3,121.6 392,127.3 C394.7,133.1 397.3,154.2 400,160.4 C402.7,166.5 405.3,173.6 408,164.1 C410.7,154.6 413.3,112.5 416,103.2 C418.7,93.9 421.3,105.5 424,108.2 C426.7,110.9 429.3,115.6 432,119.4 C434.7,123.3 437.3,144.4 440,131.6 C442.7,118.8 445.3,44 448,42.8 C450.7,41.6 453.3,104.4 456,124.5 C458.7,144.5 461.3,168.7 464,162.9 C466.7,157 469.3,95.2 472,89.3 C474.7,83.3 477.3,119.9 480,127.1 C482.7,134.3 485.3,146.5 488,132.5 C490.7,118.4 493.3,39.4 496,42.8 C498.7,46.3 501.3,151.2 504,153 C506.7,154.8 509.3,52.7 512,53.7 C514.7,54.8 517.3,151.1 520,159.3 C522.7,167.5 525.3,116.7 528,102.8 C530.7,89 533.3,81 536,76.2 C538.7,71.4 541.3,80.8 544,74.1 C546.7,67.4 549.3,25.6 552,36 C554.7,46.5 557.3,116.5 560,136.6 C562.7,156.7 565.3,173.4 568,156.8 C570.7,140.2 573.3,36.2 576,37.1 C578.7,38 581.3,159.2 584,162.3 C586.7,165.5 589.3,69.3 592,56 C594.7,42.8 597.3,78.9 600,82.7 C602.7,86.4 605.3,88.4 608,78.4 C610.7,68.3 613.3,10.3 616,22.3 C618.7,34.3 621.3,139.7 624,150.5 C626.7,161.4 629.3,104.6 632,87.3 C634.7,70 637.3,39.3 640,46.8 C642.7,54.3 645.3,124.2 648,132.3 C650.7,140.4 653.3,113.9 656,95.2 C658.7,76.4 661.3,11.4 664,19.6 C666.7,27.8 669.3,124.1 672,144.3 C674.7,164.5 677.3,155.8 680,140.9 C682.7,125.9 685.3,72.7 688,54.6 C690.7,36.5 693.3,18.6 696,32.5 C698.7,46.3 701.3,117.6 704,137.7 C706.7,157.8 709.3,167.8 712,153 C714.7,138.2 718.7,66.3 720,48.9 L720,128.6 C718.7,135.7 714.7,165.5 712,171.4 C709.3,177.4 706.7,174.1 704,164.3 C701.3,154.5 698.7,117.8 696,112.5 C693.3,107.1 690.7,123.2 688,132.1 C685.3,141.1 682.7,160.1 680,166.1 C677.3,172 674.7,178 672,167.9 C669.3,157.7 666.7,108 664,105.3 C661.3,102.7 658.7,142.3 656,151.8 C653.3,161.3 650.7,167.9 648,162.5 C645.3,157.1 642.7,122 640,119.6 C637.3,117.2 634.7,139.9 632,148.2 C629.3,156.5 626.7,176.5 624,169.6 C621.3,162.8 618.7,111.3 616,107.1 C613.3,103 610.7,139.6 608,144.6 C605.3,149.7 602.7,139.6 600,137.5 C597.3,135.4 594.7,125.6 592,132.1 C589.3,138.7 586.7,178 584,176.8 C581.3,175.6 578.7,125.6 576,125 C573.3,124.4 570.7,166.7 568,173.2 C565.3,179.8 562.7,174.1 560,164.3 C557.3,154.5 554.7,117.8 552,114.3 C549.3,110.7 546.7,139.6 544,142.8 C541.3,146.1 538.7,131.8 536,133.9 C533.3,136 530.7,148.5 528,155.3 C525.3,162.2 522.7,178.9 520,175 C517.3,171.1 514.7,132.7 512,132.1 C509.3,131.5 506.7,172.3 504,171.4 C501.3,170.5 498.7,128 496,126.8 C493.3,125.6 490.7,158.9 488,164.3 C485.3,169.6 482.7,161.3 480,158.9 C477.3,156.5 474.7,147 472,150 C469.3,153 466.7,174.1 464,176.8 C461.3,179.5 458.7,175.9 456,166.1 C453.3,156.2 450.7,117.2 448,117.8 C445.3,118.4 442.7,163.4 440,169.6 C437.3,175.9 434.7,156.8 432,155.3 C429.3,153.9 426.7,161.9 424,160.7 C421.3,159.5 418.7,145.2 416,148.2 C413.3,151.2 410.7,174.1 408,178.6 C405.3,183 402.7,178.3 400,175 C397.3,171.7 394.7,160.1 392,158.9 C389.3,157.7 386.7,171.4 384,167.9 C381.3,164.3 378.7,144.6 376,137.5 C373.3,130.3 370.7,126.5 368,125 C365.3,123.5 362.7,127.4 360,128.6 C357.3,129.7 354.7,134.8 352,132.1 C349.3,129.5 346.7,105.9 344,112.5 C341.3,119 338.7,164 336,171.4 C333.3,178.9 330.7,160.4 328,157.1 C325.3,153.9 322.7,154.5 320,151.8 C317.3,149.1 314.7,138.4 312,141.1 C309.3,143.7 306.7,164.3 304,167.9 C301.3,171.4 298.7,166.1 296,162.5 C293.3,158.9 290.7,155.6 288,146.4 C285.3,137.2 282.7,109.8 280,107.1 C277.3,104.4 274.7,127.4 272,130.3 C269.3,133.3 266.7,119 264,125 C261.3,130.9 258.7,162.8 256,166.1 C253.3,169.3 250.7,145.5 248,144.6 C245.3,143.7 242.7,162.8 240,160.7 C237.3,158.6 234.7,132.7 232,132.1 C229.3,131.5 226.7,151.2 224,157.1 C221.3,163.1 218.7,173.2 216,167.9 C213.3,162.5 210.7,123.5 208,125 C205.3,126.5 202.7,171.7 200,176.8 C197.3,181.8 194.7,160.1 192,155.3 C189.3,150.6 186.7,147.6 184,148.2 C181.3,148.8 178.7,155.3 176,158.9 C173.3,162.5 170.7,168.7 168,169.6 C165.3,170.5 162.7,163.7 160,164.3 C157.3,164.9 154.7,172.6 152,173.2 C149.3,173.8 146.7,175.6 144,167.9 C141.3,160.1 138.7,132.1 136,126.8 C133.3,121.4 130.7,129.2 128,135.7 C125.3,142.3 122.7,160.4 120,166.1 C117.3,171.7 114.7,170.5 112,169.6 C109.3,168.7 106.7,167 104,160.7 C101.3,154.5 98.7,131.8 96,132.1 C93.3,132.4 90.7,161.6 88,162.5 C85.3,163.4 82.7,136.9 80,137.5 C77.3,138.1 74.7,158.9 72,166.1 C69.3,173.2 66.7,184.2 64,180.4 C61.3,176.5 58.7,144.9 56,142.8 C53.3,140.8 50.7,168.4 48,167.9 C45.3,167.3 42.7,142.5 40,139.3 C37.3,136 34.7,145.8 32,148.2 C29.3,150.6 26.7,148.5 24,153.6 C21.3,158.6 18.7,176.2 16,178.6 C13.3,180.9 10.7,168.7 8,167.9 C5.3,167 1.3,172.3 0,173.2 Z"
></path>
<path
class="scr-chart__line"
d="M0,133.6 C1.3,136.4 5.3,148 8,150.5 C10.7,153.1 13.3,155.4 16,148.7 C18.7,142 21.3,121.5 24,110.3 C26.7,99.1 29.3,85.7 32,81.6 C34.7,77.4 37.3,78.4 40,85.5 C42.7,92.6 45.3,126.7 48,124.1 C50.7,121.5 53.3,62.2 56,69.8 C58.7,77.4 61.3,161.5 64,169.8 C66.7,178.1 69.3,134.6 72,119.4 C74.7,104.3 77.3,80.6 80,79.1 C82.7,77.6 85.3,111.7 88,110.3 C90.7,109 93.3,66.7 96,71 C98.7,75.4 101.3,123.4 104,136.2 C106.7,149.1 109.3,147.3 112,148.2 C114.7,149.1 117.3,156.8 120,141.4 C122.7,126.1 125.3,69.3 128,56 C130.7,42.8 133.3,50.4 136,61.8 C138.7,73.2 141.3,108.5 144,124.5 C146.7,140.4 149.3,154.8 152,157.3 C154.7,159.9 157.3,144.4 160,139.8 C162.7,135.2 165.3,130.6 168,129.6 C170.7,128.7 173.3,142.7 176,134.3 C178.7,125.8 181.3,82 184,79.1 C186.7,76.2 189.3,102.9 192,116.9 C194.7,131 197.3,173.4 200,163.4 C202.7,153.3 205.3,59.5 208,56.6 C210.7,53.7 213.3,138.7 216,146.1 C218.7,153.4 221.3,116.7 224,100.9 C226.7,85 229.3,46 232,51 C234.7,56.1 237.3,124.4 240,131.2 C242.7,138.1 245.3,93.9 248,92.3 C250.7,90.8 253.3,128 256,122 C258.7,115.9 261.3,69.1 264,56.2 C266.7,43.3 269.3,50.8 272,44.4 C274.7,38.1 277.3,12.7 280,18.2 C282.7,23.6 285.3,57.5 288,77.1 C290.7,96.7 293.3,127.5 296,135.9 C298.7,144.2 301.3,135.2 304,127.3 C306.7,119.4 309.3,94.6 312,88.7 C314.7,82.8 317.3,86.4 320,91.9 C322.7,97.5 325.3,114.6 328,122 C330.7,129.3 333.3,151.2 336,136.2 C338.7,121.3 341.3,47.2 344,32.5 C346.7,17.7 349.3,41.7 352,47.7 C354.7,53.6 357.3,70.2 360,68.2 C362.7,66.2 365.3,33.7 368,35.9 C370.7,38 373.3,66.2 376,81.2 C378.7,96.2 381.3,118.2 384,125.9 C386.7,133.6 389.3,121.6 392,127.3 C394.7,133.1 397.3,154.2 400,160.4 C402.7,166.5 405.3,173.6 408,164.1 C410.7,154.6 413.3,112.5 416,103.2 C418.7,93.9 421.3,105.5 424,108.2 C426.7,110.9 429.3,115.6 432,119.4 C434.7,123.3 437.3,144.4 440,131.6 C442.7,118.8 445.3,44 448,42.8 C450.7,41.6 453.3,104.4 456,124.5 C458.7,144.5 461.3,168.7 464,162.9 C466.7,157 469.3,95.2 472,89.3 C474.7,83.3 477.3,119.9 480,127.1 C482.7,134.3 485.3,146.5 488,132.5 C490.7,118.4 493.3,39.4 496,42.8 C498.7,46.3 501.3,151.2 504,153 C506.7,154.8 509.3,52.7 512,53.7 C514.7,54.8 517.3,151.1 520,159.3 C522.7,167.5 525.3,116.7 528,102.8 C530.7,89 533.3,81 536,76.2 C538.7,71.4 541.3,80.8 544,74.1 C546.7,67.4 549.3,25.6 552,36 C554.7,46.5 557.3,116.5 560,136.6 C562.7,156.7 565.3,173.4 568,156.8 C570.7,140.2 573.3,36.2 576,37.1 C578.7,38 581.3,159.2 584,162.3 C586.7,165.5 589.3,69.3 592,56 C594.7,42.8 597.3,78.9 600,82.7 C602.7,86.4 605.3,88.4 608,78.4 C610.7,68.3 613.3,10.3 616,22.3 C618.7,34.3 621.3,139.7 624,150.5 C626.7,161.4 629.3,104.6 632,87.3 C634.7,70 637.3,39.3 640,46.8 C642.7,54.3 645.3,124.2 648,132.3 C650.7,140.4 653.3,113.9 656,95.2 C658.7,76.4 661.3,11.4 664,19.6 C666.7,27.8 669.3,124.1 672,144.3 C674.7,164.5 677.3,155.8 680,140.9 C682.7,125.9 685.3,72.7 688,54.6 C690.7,36.5 693.3,18.6 696,32.5 C698.7,46.3 701.3,117.6 704,137.7 C706.7,157.8 709.3,167.8 712,153 C714.7,138.2 718.7,66.3 720,48.9"
></path>
</g>
</svg>
<div class="scr-chart__axis" aria-hidden="true">
<span>Apr 1</span>
<span>Apr 19</span>
<span>May 7</span>
<span>May 25</span>
<span>Jun 12</span>
<span>Jun 30</span>
</div>
</figure>
<figure class="scr-chart__plot" data-range="30d">
<figcaption class="scr-sr">Stacked area chart of visitors per day, Jun 1 to Jun 30 2024: mobile 9,090, desktop 8,792 visitors.</figcaption>
<svg
class="scr-chart__svg"
viewBox="0 0 720 200"
preserveAspectRatio="none"
aria-hidden="true"
focusable="false"
>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="50"
y2="50"
></line>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="100"
y2="100"
></line>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="150"
y2="150"
></line>
<g class="scr-chart__series" data-series="1">
<path
class="scr-chart__area"
d="M0,164 C4.1,157.7 16.6,125 24.8,126.2 C33.1,127.4 41.4,170.3 49.7,171.2 C57.9,172.1 66.2,131 74.5,131.6 C82.8,132.2 91,170.9 99.3,174.8 C107.6,178.7 115.9,161.9 124.1,155 C132.4,148.1 140.7,135.5 149,133.4 C157.2,131.3 165.5,145.7 173.8,142.4 C182.1,139.1 190.3,110 198.6,113.6 C206.9,117.2 215.2,154.1 223.4,164 C231.7,173.9 240,179.6 248.3,173 C256.6,166.4 264.8,123.8 273.1,124.4 C281.4,125 289.7,175.4 297.9,176.6 C306.2,177.8 314.5,138.2 322.8,131.6 C331,125 339.3,134.9 347.6,137 C355.9,139.1 364.1,149.3 372.4,144.2 C380.7,139.1 389,102.2 397.2,106.4 C405.5,110.6 413.8,162.5 422.1,169.4 C430.3,176.3 438.6,156.2 446.9,147.8 C455.2,139.4 463.4,116.6 471.7,119 C480,121.4 488.3,156.8 496.6,162.2 C504.8,167.6 513.1,161 521.4,151.4 C529.7,141.8 537.9,101.9 546.2,104.6 C554.5,107.3 562.8,157.4 571,167.6 C579.3,177.8 587.6,171.8 595.9,165.8 C604.1,159.8 612.4,140.6 620.7,131.6 C629,122.6 637.2,106.4 645.5,111.8 C653.8,117.2 662.1,154.1 670.3,164 C678.6,173.9 686.9,177.2 695.2,171.2 C703.4,165.2 715.9,135.2 720,128 L720,200 C715.9,200 703.4,200 695.2,200 C686.9,200 678.6,200 670.3,200 C662.1,200 653.8,200 645.5,200 C637.2,200 629,200 620.7,200 C612.4,200 604.1,200 595.9,200 C587.6,200 579.3,200 571,200 C562.8,200 554.5,200 546.2,200 C537.9,200 529.7,200 521.4,200 C513.1,200 504.8,200 496.6,200 C488.3,200 480,200 471.7,200 C463.4,200 455.2,200 446.9,200 C438.6,200 430.3,200 422.1,200 C413.8,200 405.5,200 397.2,200 C389,200 380.7,200 372.4,200 C364.1,200 355.9,200 347.6,200 C339.3,200 331,200 322.8,200 C314.5,200 306.2,200 297.9,200 C289.7,200 281.4,200 273.1,200 C264.8,200 256.6,200 248.3,200 C240,200 231.7,200 223.4,200 C215.2,200 206.9,200 198.6,200 C190.3,200 182.1,200 173.8,200 C165.5,200 157.2,200 149,200 C140.7,200 132.4,200 124.1,200 C115.9,200 107.6,200 99.3,200 C91,200 82.8,200 74.5,200 C66.2,200 57.9,200 49.7,200 C41.4,200 33.1,200 24.8,200 C16.6,200 4.1,200 0,200 Z"
></path>
<path
class="scr-chart__line"
d="M0,164 C4.1,157.7 16.6,125 24.8,126.2 C33.1,127.4 41.4,170.3 49.7,171.2 C57.9,172.1 66.2,131 74.5,131.6 C82.8,132.2 91,170.9 99.3,174.8 C107.6,178.7 115.9,161.9 124.1,155 C132.4,148.1 140.7,135.5 149,133.4 C157.2,131.3 165.5,145.7 173.8,142.4 C182.1,139.1 190.3,110 198.6,113.6 C206.9,117.2 215.2,154.1 223.4,164 C231.7,173.9 240,179.6 248.3,173 C256.6,166.4 264.8,123.8 273.1,124.4 C281.4,125 289.7,175.4 297.9,176.6 C306.2,177.8 314.5,138.2 322.8,131.6 C331,125 339.3,134.9 347.6,137 C355.9,139.1 364.1,149.3 372.4,144.2 C380.7,139.1 389,102.2 397.2,106.4 C405.5,110.6 413.8,162.5 422.1,169.4 C430.3,176.3 438.6,156.2 446.9,147.8 C455.2,139.4 463.4,116.6 471.7,119 C480,121.4 488.3,156.8 496.6,162.2 C504.8,167.6 513.1,161 521.4,151.4 C529.7,141.8 537.9,101.9 546.2,104.6 C554.5,107.3 562.8,157.4 571,167.6 C579.3,177.8 587.6,171.8 595.9,165.8 C604.1,159.8 612.4,140.6 620.7,131.6 C629,122.6 637.2,106.4 645.5,111.8 C653.8,117.2 662.1,154.1 670.3,164 C678.6,173.9 686.9,177.2 695.2,171.2 C703.4,165.2 715.9,135.2 720,128"
></path>
</g>
<g class="scr-chart__series" data-series="2">
<path
class="scr-chart__area"
d="M0,132 C4.1,116.9 16.6,38.1 24.8,41.6 C33.1,45 41.4,150.8 49.7,152.7 C57.9,154.5 66.2,51.5 74.5,52.6 C82.8,53.6 91,150.7 99.3,159 C107.6,167.2 115.9,116 124.1,102.1 C132.4,88.1 140.7,80.1 149,75.2 C157.2,70.4 165.5,79.8 173.8,73.1 C182.1,66.3 190.3,24.2 198.6,34.7 C206.9,45.2 215.2,115.8 223.4,136.1 C231.7,156.4 240,173.1 248.3,156.4 C256.6,139.7 264.8,34.9 273.1,35.8 C281.4,36.8 289.7,158.8 297.9,162 C306.2,165.2 314.5,68.3 322.8,54.9 C331,41.5 339.3,78 347.6,81.7 C355.9,85.5 364.1,87.5 372.4,77.4 C380.7,67.3 389,8.8 397.2,20.9 C405.5,33 413.8,139.2 422.1,150.1 C430.3,161.1 438.6,103.8 446.9,86.4 C455.2,69 463.4,38 471.7,45.5 C480,53.1 488.3,123.6 496.6,131.8 C504.8,139.9 513.1,113.3 521.4,94.3 C529.7,75.4 537.9,9.9 546.2,18.2 C554.5,26.4 562.8,123.5 571,143.8 C579.3,164.2 587.6,155.5 595.9,140.4 C604.1,125.4 612.4,71.7 620.7,53.5 C629,35.3 637.2,17.2 645.5,31.1 C653.8,45.1 662.1,116.9 670.3,137.2 C678.6,157.4 686.9,167.6 695.2,152.7 C703.4,137.7 715.9,65.2 720,47.7 L720,128 C715.9,135.2 703.4,165.2 695.2,171.2 C686.9,177.2 678.6,173.9 670.3,164 C662.1,154.1 653.8,117.2 645.5,111.8 C637.2,106.4 629,122.6 620.7,131.6 C612.4,140.6 604.1,159.8 595.9,165.8 C587.6,171.8 579.3,177.8 571,167.6 C562.8,157.4 554.5,107.3 546.2,104.6 C537.9,101.9 529.7,141.8 521.4,151.4 C513.1,161 504.8,167.6 496.6,162.2 C488.3,156.8 480,121.4 471.7,119 C463.4,116.6 455.2,139.4 446.9,147.8 C438.6,156.2 430.3,176.3 422.1,169.4 C413.8,162.5 405.5,110.6 397.2,106.4 C389,102.2 380.7,139.1 372.4,144.2 C364.1,149.3 355.9,139.1 347.6,137 C339.3,134.9 331,125 322.8,131.6 C314.5,138.2 306.2,177.8 297.9,176.6 C289.7,175.4 281.4,125 273.1,124.4 C264.8,123.8 256.6,166.4 248.3,173 C240,179.6 231.7,173.9 223.4,164 C215.2,154.1 206.9,117.2 198.6,113.6 C190.3,110 182.1,139.1 173.8,142.4 C165.5,145.7 157.2,131.3 149,133.4 C140.7,135.5 132.4,148.1 124.1,155 C115.9,161.9 107.6,178.7 99.3,174.8 C91,170.9 82.8,132.2 74.5,131.6 C66.2,131 57.9,172.1 49.7,171.2 C41.4,170.3 33.1,127.4 24.8,126.2 C16.6,125 4.1,157.7 0,164 Z"
></path>
<path
class="scr-chart__line"
d="M0,132 C4.1,116.9 16.6,38.1 24.8,41.6 C33.1,45 41.4,150.8 49.7,152.7 C57.9,154.5 66.2,51.5 74.5,52.6 C82.8,53.6 91,150.7 99.3,159 C107.6,167.2 115.9,116 124.1,102.1 C132.4,88.1 140.7,80.1 149,75.2 C157.2,70.4 165.5,79.8 173.8,73.1 C182.1,66.3 190.3,24.2 198.6,34.7 C206.9,45.2 215.2,115.8 223.4,136.1 C231.7,156.4 240,173.1 248.3,156.4 C256.6,139.7 264.8,34.9 273.1,35.8 C281.4,36.8 289.7,158.8 297.9,162 C306.2,165.2 314.5,68.3 322.8,54.9 C331,41.5 339.3,78 347.6,81.7 C355.9,85.5 364.1,87.5 372.4,77.4 C380.7,67.3 389,8.8 397.2,20.9 C405.5,33 413.8,139.2 422.1,150.1 C430.3,161.1 438.6,103.8 446.9,86.4 C455.2,69 463.4,38 471.7,45.5 C480,53.1 488.3,123.6 496.6,131.8 C504.8,139.9 513.1,113.3 521.4,94.3 C529.7,75.4 537.9,9.9 546.2,18.2 C554.5,26.4 562.8,123.5 571,143.8 C579.3,164.2 587.6,155.5 595.9,140.4 C604.1,125.4 612.4,71.7 620.7,53.5 C629,35.3 637.2,17.2 645.5,31.1 C653.8,45.1 662.1,116.9 670.3,137.2 C678.6,157.4 686.9,167.6 695.2,152.7 C703.4,137.7 715.9,65.2 720,47.7"
></path>
</g>
</svg>
<div class="scr-chart__axis" aria-hidden="true">
<span>Jun 1</span>
<span>Jun 7</span>
<span>Jun 13</span>
<span>Jun 19</span>
<span>Jun 25</span>
</div>
</figure>
<figure class="scr-chart__plot" data-range="7d">
<figcaption class="scr-sr">Stacked area chart of visitors per day, Jun 24 to Jun 30 2024: mobile 2,000, desktop 1,853 visitors.</figcaption>
<svg
class="scr-chart__svg"
viewBox="0 0 720 200"
preserveAspectRatio="none"
aria-hidden="true"
focusable="false"
>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="50"
y2="50"
></line>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="100"
y2="100"
></line>
<line
class="scr-chart__grid"
x1="0"
x2="720"
y1="150"
y2="150"
></line>
<g class="scr-chart__series" data-series="1">
<path
class="scr-chart__area"
d="M0,165.1 C20,164.8 80,169.6 120,163.2 C160,156.7 200,136 240,126.3 C280,116.7 320,99.2 360,105 C400,110.8 440,150.6 480,161.2 C520,171.9 560,175.4 600,169 C640,162.5 700,130.2 720,122.5 L720,200 C700,200 640,200 600,200 C560,200 520,200 480,200 C440,200 400,200 360,200 C320,200 280,200 240,200 C200,200 160,200 120,200 C80,200 20,200 0,200 Z"
></path>
<path
class="scr-chart__line"
d="M0,165.1 C20,164.8 80,169.6 120,163.2 C160,156.7 200,136 240,126.3 C280,116.7 320,99.2 360,105 C400,110.8 440,150.6 480,161.2 C520,171.9 560,175.4 600,169 C640,162.5 700,130.2 720,122.5"
></path>
</g>
<g class="scr-chart__series" data-series="2">
<path
class="scr-chart__area"
d="M0,139.5 C20,138.9 80,152.1 120,135.8 C160,119.6 200,61.8 240,42.2 C280,22.6 320,3.2 360,18.2 C400,33.2 440,110.5 480,132.4 C520,154.2 560,165.1 600,149 C640,133 700,54.8 720,36 L720,122.5 C700,130.2 640,162.5 600,169 C560,175.4 520,171.9 480,161.2 C440,150.6 400,110.8 360,105 C320,99.2 280,116.7 240,126.3 C200,136 160,156.7 120,163.2 C80,169.6 20,164.8 0,165.1 Z"
></path>
<path
class="scr-chart__line"
d="M0,139.5 C20,138.9 80,152.1 120,135.8 C160,119.6 200,61.8 240,42.2 C280,22.6 320,3.2 360,18.2 C400,33.2 440,110.5 480,132.4 C520,154.2 560,165.1 600,149 C640,133 700,54.8 720,36"
></path>
</g>
</svg>
<div class="scr-chart__axis" aria-hidden="true">
<span>Jun 24</span>
<span>Jun 25</span>
<span>Jun 26</span>
<span>Jun 27</span>
<span>Jun 28</span>
<span>Jun 29</span>
<span>Jun 30</span>
</div>
</figure>
<ul class="scr-chart__legend">
<li data-series="1">
<span
class="scr-chart__swatch"
aria-hidden="true"
></span>
Mobile
</li>
<li data-series="2">
<span
class="scr-chart__swatch"
aria-hidden="true"
></span>
Desktop
</li>
</ul>
</div>
</div>
<section
class="scr-stack"
aria-labelledby="dashboard-01-outline"
>
<div class="scr-row" data-justify="between">
<nav class="scr-tabs" aria-label="Views">
<a
class="scr-tabs__link"
href="#"
aria-current="page"
>Outline</a>
<a class="scr-tabs__link" href="#">
Past Performance
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>3</span>
</span>
</a>
<a class="scr-tabs__link" href="#">
Key Personnel
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>2</span>
</span>
</a>
<a class="scr-tabs__link" href="#">Focus Documents</a>
</nav>
<div class="scr-row">
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
data-part="trigger"
id="dashboard-01-columns-trigger"
popovertarget="dashboard-01-columns"
>
<span
class="ds-button__label"
data-part="label"
>Customize Columns</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-columns"
popover
aria-labelledby="dashboard-01-columns-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-columns"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>check</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Section Type</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-columns"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>check</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Status</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-columns"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>check</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Target</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-columns"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>check</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Limit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-columns"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>check</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Reviewer</span>
</button>
</li>
</ul>
</div>
</div>
<button
type="button"
class="ds-button"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-button__icon"
data-part="icon"
data-position="start"
aria-hidden="true"
>add</span>
<span
class="ds-button__label"
data-part="label"
>Add Section</span>
</button>
</div>
</div>
<div class="scr-table-wrap">
<table class="scr-table">
<caption
class="scr-sr"
id="dashboard-01-outline"
>Outline: the sections of the document</caption>
<thead>
<tr>
<th scope="col">Header</th>
<th scope="col">Section Type</th>
<th scope="col">Status</th>
<th scope="col" class="scr-num">Target</th>
<th scope="col" class="scr-num">Limit</th>
<th scope="col">Reviewer</th>
<th scope="col">
<span class="scr-sr">Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-1"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-1"
>Cover page</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Cover page</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>In Process</span>
</span>
</td>
<td class="scr-num">18</td>
<td class="scr-num">5</td>
<td>Eddie Lake</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-1-menu-trigger"
popovertarget="dashboard-01-row-1-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-1-menu"
popover
aria-labelledby="dashboard-01-row-1-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-1-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-1-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-1-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-1-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-2"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-2"
>Table of contents</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Table of contents</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="success"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Done</span>
</span>
</td>
<td class="scr-num">29</td>
<td class="scr-num">24</td>
<td>Eddie Lake</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-2-menu-trigger"
popovertarget="dashboard-01-row-2-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-2-menu"
popover
aria-labelledby="dashboard-01-row-2-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-2-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-2-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-2-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-2-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-3"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-3"
>Executive summary</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Narrative</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="success"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Done</span>
</span>
</td>
<td class="scr-num">10</td>
<td class="scr-num">13</td>
<td>Eddie Lake</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-3-menu-trigger"
popovertarget="dashboard-01-row-3-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-3-menu"
popover
aria-labelledby="dashboard-01-row-3-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-3-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-3-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-3-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-3-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-4"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-4"
>Technical approach</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Narrative</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="success"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Done</span>
</span>
</td>
<td class="scr-num">27</td>
<td class="scr-num">23</td>
<td>Jamik Tashpulatov</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-4-menu-trigger"
popovertarget="dashboard-01-row-4-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-4-menu"
popover
aria-labelledby="dashboard-01-row-4-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-4-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-4-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-4-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-4-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-5"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-5"
>Design</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Narrative</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>In Process</span>
</span>
</td>
<td class="scr-num">2</td>
<td class="scr-num">16</td>
<td>Jamik Tashpulatov</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-5-menu-trigger"
popovertarget="dashboard-01-row-5-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-5-menu"
popover
aria-labelledby="dashboard-01-row-5-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-5-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-5-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-5-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-5-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-6"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-6"
>Capabilities</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Narrative</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>In Process</span>
</span>
</td>
<td class="scr-num">20</td>
<td class="scr-num">8</td>
<td>Jamik Tashpulatov</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-6-menu-trigger"
popovertarget="dashboard-01-row-6-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-6-menu"
popover
aria-labelledby="dashboard-01-row-6-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-6-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-6-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-6-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-6-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-7"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-7"
>Integration with existing systems</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Narrative</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>In Process</span>
</span>
</td>
<td class="scr-num">19</td>
<td class="scr-num">21</td>
<td>Jamik Tashpulatov</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-7-menu-trigger"
popovertarget="dashboard-01-row-7-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-7-menu"
popover
aria-labelledby="dashboard-01-row-7-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-7-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-7-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-7-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-7-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-8"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-8"
>Innovation and Advantages</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Narrative</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="success"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Done</span>
</span>
</td>
<td class="scr-num">25</td>
<td class="scr-num">26</td>
<td class="scr-muted">Assign reviewer</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-8-menu-trigger"
popovertarget="dashboard-01-row-8-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-8-menu"
popover
aria-labelledby="dashboard-01-row-8-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-8-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-8-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-8-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-8-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-9"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-9"
>Overview of EMR's Innovative Solutions</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Technical content</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="success"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Done</span>
</span>
</td>
<td class="scr-num">7</td>
<td class="scr-num">23</td>
<td class="scr-muted">Assign reviewer</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-9-menu-trigger"
popovertarget="dashboard-01-row-9-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-9-menu"
popover
aria-labelledby="dashboard-01-row-9-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-9-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-9-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-9-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-9-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="ds-checkbox" data-size="small">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="dashboard-01-row-10"
name="rows"
>
<label
class="ds-checkbox__label"
data-part="label"
for="dashboard-01-row-10"
>Advanced Algorithms and Machine Learning</label>
</div>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="neutral"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Narrative</span>
</span>
</td>
<td>
<span
class="ds-badge"
data-emphasis="subtle"
data-intent="success"
data-size="small"
>
<span
class="ds-badge__label"
data-part="label"
>Done</span>
</span>
</td>
<td class="scr-num">30</td>
<td class="scr-num">28</td>
<td class="scr-muted">Assign reviewer</td>
<td>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="dashboard-01-row-10-menu-trigger"
popovertarget="dashboard-01-row-10-menu"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="dashboard-01-row-10-menu"
popover
aria-labelledby="dashboard-01-row-10-menu-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-10-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Edit</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-10-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Make a copy</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="dashboard-01-row-10-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Favorite</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="error"
popovertarget="dashboard-01-row-10-menu"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="scr-row scr-table-footer"
data-justify="between"
>
<p class="scr-muted">0 of 68 row(s) selected.</p>
<div class="scr-row">
<div class="ds-select" data-size="small">
<label
class="ds-select__label"
data-part="label"
for="dashboard-01-rows-per-page"
>Rows per page</label>
<div class="ds-select__field" data-part="field">
<select
class="ds-select__control"
data-part="control"
id="dashboard-01-rows-per-page"
>
<option
class="ds-select__option"
data-part="option"
value="10"
selected
>10</option>
<option
class="ds-select__option"
data-part="option"
value="20"
>20</option>
<option
class="ds-select__option"
data-part="option"
value="30"
>30</option>
<option
class="ds-select__option"
data-part="option"
value="40"
>40</option>
<option
class="ds-select__option"
data-part="option"
value="50"
>50</option>
</select>
<span
class="ds-select__indicator"
data-part="indicator"
aria-hidden="true"
>expand_more</span>
</div>
</div>
<p class="scr-strong">Page 1 of 7</p>
<nav
class="ds-pagination"
aria-label="Outline pages"
data-size="small"
>
<ul class="ds-pagination__list" data-part="list">
<li
class="ds-pagination__item"
data-part="previous"
>
<span
class="ds-pagination__link"
data-part="link"
role="link"
aria-disabled="true"
>
<span
class="ds-pagination__icon"
aria-hidden="true"
>chevron_left</span>
<span>Previous</span>
</span>
</li>
<li class="ds-pagination__item" data-part="item">
<span
class="ds-pagination__link"
data-part="link"
aria-current="page"
>1</span>
</li>
<li class="ds-pagination__item" data-part="item">
<a
class="ds-pagination__link"
data-part="link"
href="#"
>2</a>
</li>
<li class="ds-pagination__item" data-part="item">
<a
class="ds-pagination__link"
data-part="link"
href="#"
>3</a>
</li>
<li class="ds-pagination__item" data-part="item">
<a
class="ds-pagination__link"
data-part="link"
href="#"
>4</a>
</li>
<li class="ds-pagination__item" data-part="item">
<a
class="ds-pagination__link"
data-part="link"
href="#"
>5</a>
</li>
<li class="ds-pagination__item" data-part="item">
<a
class="ds-pagination__link"
data-part="link"
href="#"
>6</a>
</li>
<li class="ds-pagination__item" data-part="item">
<a
class="ds-pagination__link"
data-part="link"
href="#"
>7</a>
</li>
<li class="ds-pagination__item" data-part="next">
<a
class="ds-pagination__link"
data-part="link"
href="#"
>
<span>Next</span>
<span
class="ds-pagination__icon"
aria-hidden="true"
>chevron_right</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</main>
</div>
</div>
</div>
</div>