Components / templates

Dashboard template

A page layout for an overview: navigation on the side and at the top, a row of key numbers, and the main content below.

Usage

When to use it

Use it for pages where people check the state of something and then act, such as a project overview or an analytics view. The template has no real content. It shows where each organism goes and how much room it gets.

02 / examples

See the component in context.

Variant 01

Layout

Dashed boxes are content that is filled in per page. Navigation, buttons and the page title use the system's own components.

DS by Berit

Section

Page title

Metric cardCard organism

Chart or main contentFills the width of the first two columns

Side panelNotes, activity or filters

TableTable organism, with its filters above

03 / contract

Rules the component follows

The dashboard template arranges the top navigation, the side navigation, a page header with one primary action, a row of key numbers, a chart or main content area and a table. The side navigation stays on the left on large screens and moves above the content on small screens. The key numbers sit in one row and wrap on smaller screens, and content below them keeps the same left edge.

The page header has one primary button, and any other actions are secondary, so the most important action is clear.

04 / accessibility

Accessibility information

The page uses the header, navigation, main and section landmarks, and each navigation has its own label. The page has a single main heading, and sections below it use second-level headings.

The reading order follows the visual order: navigation first, then the header, the key numbers and the main content. A table keeps its real table markup so that its structure is understood by assistive technology.