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

# Styling

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

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

| Flow `DashboardVariant`  | `theme` attribute   | Description                                                    |
| ------------------------ | ------------------- | -------------------------------------------------------------- |
| `LUMO_SHADED_BACKGROUND` | `shaded-background` | Applies shading to the dashboard background.                   |
| `LUMO_ELEVATED_WIDGETS`  | `elevated-widgets`  | Makes the widgets appear elevated above the dashboard surface. |
| `LUMO_FLAT_WIDGETS`      | `flat-widgets`      | A flat, borderless widget style.                               |

`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 { applyTheme } from 'Frontend/generated/theme';
import { SelectChangeEvent } from '@vaadin/select';
import { CheckboxChangeEvent } from '@vaadin/checkbox';

@customElement('dashboard-variants')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    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 [Lumo Style Properties](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties.md) for more information on style properties.

| Feature                                   | Property                                          | Default Value                                  |
| ----------------------------------------- | ------------------------------------------------- | ---------------------------------------------- |
| Minimum column width                      | `--vaadin-dashboard-col-min-width`                | `25rem`                                        |
| Maximum column width                      | `--vaadin-dashboard-col-min-width`                | `1fr`                                          |
| Maximum column count                      | `--vaadin-dashboard-col-max-count`                |                                                |
| Minimum row height                        | `--vaadin-dashboard-row-min-height`               | `12rem`                                        |
| Dashboard padding (around contents)       | `--vaadin-dashboard-padding`                      | `--lumo-space-m`                               |
| Widget gap                                | `--vaadin-dashboard-gap`                          | `--lumo-space-m`                               |
| Widget background                         | `--vaadin-dashboard-widget-background`            | `--lumo-base-color`                            |
| Widget corner radius                      | `--vaadin-dashboard-widget-border-radius`         | `--lumo-border-radius-l`                       |
| Widget border width                       | `--vaadin-dashboard-widget-border-width`          | `--1px`                                        |
| Widget border color                       | `--vaadin-dashboard-widget-border-color`          | `--lumo-contrast-20pct`                        |
| Widget shadow (non-editable)              | `--vaadin-dashboard-widget-shadow`                | `0 0 0 0 transparent`                          |
| Widget content padding                    | `--vaadin-dashboard-widget-padding`               | `0px`                                          |
| Widget title wrapping                     | `--vaadin-dashboard-widget-title-wrap`            | `wrap`                                         |
| Drop target / resize box background color | `--vaadin-dashboard-drop-target-background-color` | `--lumo-primary-color-10pct`                   |
| Drop target / resize box border           | `--vaadin-dashboard-drop-target-border`           | `--1px dashed var(--lumo-primary-color-50pct)` |

## <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/v24/styling.md) for more details on how to style components.

- 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-width-button)`

- Grow height button

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

- Resize apply button

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