> Markdown version of [Styling](https://vaadin.com/docs/next/components/dashboard/styling). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Dashboard Styling

## <a id="style-variants"></a>Style Variants

The following style variants can be applied to the Dashboard to change its appearance:

| Variant             | Description                                                    | Supported by |
| ------------------- | -------------------------------------------------------------- | ------------ |
| `shaded-background` | Applies shading to the dashboard background.                   | Lumo         |
| `elevated-widgets`  | Makes the widgets appear elevated above the dashboard surface. | Lumo         |
| `flat-widgets`      | A flat, borderless widget style.                               | Lumo         |

`dashboard-variants.ts`

```html
import '@vaadin/dashboard/vaadin-dashboard-layout.js';
import '@vaadin/dashboard/vaadin-dashboard-widget.js';
import '@vaadin/select';
import '@vaadin/checkbox';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { CheckboxChangeEvent } from '@vaadin/checkbox';
import type { SelectChangeEvent } from '@vaadin/select';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('dashboard-variants')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  @state()
  items = [
    { label: 'Outlined (default)', value: ' ' },
    { label: 'Flat', value: 'flat-widgets' },
    { label: 'Elevated', value: 'elevated-widgets' },
  ];

  @state()
  widgetVariant: string = ' ';

  @state()
  shadedBoard: string = '';

  onWidgetVariantChange(event: SelectChangeEvent) {
    this.widgetVariant = event.target.value;
  }

  onShadedBgChange(event: CheckboxChangeEvent) {
    this.shadedBoard = event.target.checked ? 'shaded-background' : '';
  }

  render() {
    return html`
      <div
        style="display:flex; align-items:baseline; gap:1rem; padding-inline:var(--lumo-space-m);"
      >
        <vaadin-select
          label="Widget variant"
          .items="${this.items}"
          value=" "
          @change="${this.onWidgetVariantChange}"
        ></vaadin-select>
        <vaadin-checkbox
          label="Shaded board background"
          @change="${this.onShadedBgChange}"
        ></vaadin-checkbox>
      </div>
      <vaadin-dashboard-layout
        theme="${this.widgetVariant} ${this.shadedBoard}"
        style=" width:100%; --vaadin-dashboard-row-min-height:200px; --vaadin-dashboard-col-min-width: 100px; --vaadin-dashboard-col-max-count: 3;"
      >
        <vaadin-dashboard-widget widget-title="Visitors"> </vaadin-dashboard-widget>
        <vaadin-dashboard-widget widget-title="Downloads"> </vaadin-dashboard-widget>
        <vaadin-dashboard-widget widget-title="Conversions"> </vaadin-dashboard-widget>
      </vaadin-dashboard-layout>
    `;
  }
}
```

## <a id="style-properties"></a>Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the `html {…​}` selector. See [Component Style Properties](https://vaadin.com/docs/next/styling/styling-components.md#component-style-properties) for more information on style properties.

### <a id="layout-properties"></a>Layout Properties

| Property                            | Supported by |
| ----------------------------------- | ------------ |
| `--vaadin-dashboard-col-min-width`  | Aura, Lumo   |
| `--vaadin-dashboard-col-max-width`  | Aura, Lumo   |
| `--vaadin-dashboard-col-max-count`  | Aura, Lumo   |
| `--vaadin-dashboard-row-min-height` | Aura, Lumo   |
| `--vaadin-dashboard-row-height`     | Aura, Lumo   |
| `--vaadin-dashboard-widget-rowspan` | Aura, Lumo   |
| `--vaadin-dashboard-widget-colspan` | Aura, Lumo   |
| `--vaadin-dashboard-padding`        | Aura, Lumo   |
| `--vaadin-dashboard-gap`            | Aura, Lumo   |

### <a id="widget-properties"></a>Widget Properties

| Property                                          | Supported by |
| ------------------------------------------------- | ------------ |
| `--vaadin-dashboard-widget-background`            | Aura, Lumo   |
| `--vaadin-dashboard-widget-border-radius`         | Aura, Lumo   |
| `--vaadin-dashboard-widget-border-width`          | Aura, Lumo   |
| `--vaadin-dashboard-widget-border-color`          | Aura, Lumo   |
| `--vaadin-dashboard-widget-shadow`                | Aura, Lumo   |
| `--vaadin-dashboard-widget-padding`               | Aura, Lumo   |
| `--vaadin-dashboard-widget-header-padding`        | Aura         |
| `--vaadin-dashboard-widget-header-gap`            | Aura         |
| `--vaadin-dashboard-widget-title-color`           | Aura         |
| `--vaadin-dashboard-widget-title-font-size`       | Aura         |
| `--vaadin-dashboard-widget-title-font-weight`     | Aura         |
| `--vaadin-dashboard-widget-title-line-height`     | Aura         |
| `--vaadin-dashboard-widget-title-wrap`            | Aura, Lumo   |
| `--vaadin-dashboard-drop-target-background-color` | Aura,Lumo    |
| `--vaadin-dashboard-drop-target-border`           | Aura, Lumo   |

### <a id="section-properties"></a>Section Properties

| Property                                      | Supported by |
| --------------------------------------------- | ------------ |
| `--vaadin-dashboard-section-border-radius`    | Aura         |
| `--vaadin-dashboard-widget-header-gap`        | Aura         |
| `--vaadin-dashboard-widget-title-color`       | Aura         |
| `--vaadin-dashboard-widget-title-font-size`   | Aura         |
| `--vaadin-dashboard-widget-title-font-weight` | Aura         |
| `--vaadin-dashboard-widget-title-line-height` | Aura         |
| `--vaadin-dashboard-widget-title-wrap`        | Aura, Lumo   |

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/next/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

- Dashboard root element

  `vaadin-dashboard`

- Static Dashboard Layout (React & Lit)

  `vaadin-dashboard-layout`

### <a id="widgets"></a>Widgets

- Root element

  `vaadin-dashboard-widget`

#### <a id="widget-states"></a>Widget States

- Editable

  `vaadin-dashboard-widget[editable]`

- Focused

  `vaadin-dashboard-widget[focused]`

- Selected

  `vaadin-dashboard-widget[selected]`

- Being dragged

  `vaadin-dashboard-widget[dragging]`

- Being resized

  `vaadin-dashboard-widget[resizing]`

- Accessible move mode

  `vaadin-dashboard-widget[move-mode]`

- Accessible resize mode

  `vaadin-dashboard-widget[resize-mode]`

#### <a id="widget-parts"></a>Widget Parts

- Header

  `vaadin-dashboard-widget::part(header)`

- Title

  `vaadin-dashboard-widget::part(title)`

- Content area

  `vaadin-dashboard-widget::part(content)`

- Drag handle / Move button

  `vaadin-dashboard-widget::part(move-button)`

- Remove button

  `vaadin-dashboard-widget::part(remove-button)`

- Resize handle / button

  `vaadin-dashboard-widget::part(resize-button)`

### <a id="sections"></a>Sections

- Root element

  `vaadin-dashboard-section`

#### <a id="section-states"></a>Section States

- Editable

  `vaadin-dashboard-section[editable]`

- Focused

  `vaadin-dashboard-section[focused]`

- Selected

  `vaadin-dashboard-section[selected]`

- Being dragged

  `vaadin-dashboard-section[dragging]`

- Accessible move mode

  `vaadin-dashboard-section[move-mode]`

#### <a id="section-parts"></a>Section Parts

- Header

  `vaadin-dashboard-section::part(header)`

- Title

  `vaadin-dashboard-section::part(title)`

- Drag handle / Move button

  `vaadin-dashboard-section::part(move-button)`

- Remove button

  `vaadin-dashboard-section::part(remove-button)`

### <a id="accessible-move-resize-modes"></a>Accessible Move & Resize Modes

To target move-mode buttons on Sections, replace `vaadin-dashboard-widget` with `vaadin-dashboard-section` in the selectors below.

- Move backward button

  `vaadin-dashboard-widget::part(move-backward-button)`

- Move forward button

  `vaadin-dashboard-widget::part(move-forward-button)`

- Move apply button

  `vaadin-dashboard-widget::part(move-apply-button)`

- Shrink width button

  `vaadin-dashboard-widget::part(resize-shrink-width-button)`

- Grow width button

  `vaadin-dashboard-widget::part(resize-grow-width-button)`

- Shrink height button

  `vaadin-dashboard-widget::part(resize-shrink-height-button)`

- Grow height button

  `vaadin-dashboard-widget::part(resize-grow-height-button)`

- Resize apply button

  `vaadin-dashboard-widget::part(resize-apply-button)`