---
title: DashboardLayout
description: DashboardLayout
element: vaadin-dashboard-layout
---

## Description

A responsive, grid-based dashboard layout component

```html
<vaadin-dashboard-layout>
  <vaadin-dashboard-widget widget-title="Widget 1"></vaadin-dashboard-widget>
  <vaadin-dashboard-widget widget-title="Widget 2"></vaadin-dashboard-widget>
  <vaadin-dashboard-section section-title="Section">
    <vaadin-dashboard-widget widget-title="Widget in Section"></vaadin-dashboard-widget>
  </vaadin-dashboard-section>
</vaadin-dashboard-layout>
```

### Styling

The following custom properties are available:

Custom Property                     | Description
------------------------------------|-------------
`--vaadin-dashboard-col-min-width`  | minimum column width of the layout
`--vaadin-dashboard-col-max-width`  | maximum column width of the layout
`--vaadin-dashboard-row-min-height` | minimum row height of the layout
`--vaadin-dashboard-col-max-count`  | maximum column count of the layout
`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)
`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)

The following state attributes are available for styling:

Attribute      | Description
---------------|-------------
`dense-layout` | Set when the dashboard is in dense mode.

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### denseLayout

**Type:** `boolean`

Whether the dashboard layout is dense.

### rootHeadingLevel

**Type:** `number | null | undefined`

Root heading level for sections and widgets. Defaults to 2.

If changed to e.g. 1:
- sections will have the attribute `aria-level` with value 1
- non-nested widgets will have the attribute `aria-level` with value 1
- nested widgets will have the attribute `aria-level` with value 2