Note
Subscription required

Board is included in Pro, Prime, and Enterprise subscriptions.

Board is a powerful and easy to use layout element for building responsive views. It reorders the components inside it on different screen sizes while maximising the use of available space.

Note
Work In Progress

The Java examples for this component are currently in progress. In the meantime, you can view the previous examples.

<vaadin-board>
  <vaadin-board-row>
    <example-indicator current="745" change="+33.7" title="Current users"></example-indicator>
    <example-indicator
      current="54.6k"
      change="-112.45"
      title="View events"
    ></example-indicator>
    <example-indicator
      current="18%"
      change="+3.9"
      title="Conversion rate"
    ></example-indicator>
    <example-indicator current="-123.45" title="Custom metric"></example-indicator>
  </vaadin-board-row>
  <vaadin-board-row>
    <example-chart></example-chart>
  </vaadin-board-row>
</vaadin-board>

Use Board to create responsive views and dashboards that work on any screen size.

Responsive

Board is responsive by default meaning it doesn’t require any custom development. Its layout is automatically optimized and adjusted based on the screen size, ensuring the components utilise all available space.

Rows & Columns

Board is made up of rows. Each row supports up to four columns and can contain a up to four components.

Nested Rows

Rows can be nested for more fine grained control of how certain areas of the layout behave on resize and how they are rendered.

<vaadin-board>
  <vaadin-board-row>
    <example-statistics board-cols="2"></example-statistics>
    <vaadin-board-row board-cols="1">
      <example-indicator
        current="745"
        change="+33.7"
        title="Current users"
      ></example-indicator>
      <example-indicator
        current="18%"
        change="+3.9"
        title="Conversion rate"
      ></example-indicator>
    </vaadin-board-row>
  </vaadin-board-row>
</vaadin-board>

Column Wrapping

Columns automatically wrap onto new lines as the viewport narrows. The wrapping behaviour for a row with four columns and four components is shown below.

Important
Use the draggable split handle to resize the layout and see how the columns wrap.
<vaadin-split-layout>
  <vaadin-board style="width: 100%">
    <vaadin-board-row class="row">
      <div class="cell color">Cell 1</div>
      <div class="cell color">Cell 2</div>
      <div class="cell color">Cell 3</div>
      <div class="cell color">Cell 4</div>
    </vaadin-board-row>
  </vaadin-board>
  <div></div>
</vaadin-split-layout>

Column Span

By default, components in a row shares the space equally. A component can stretch across two or three columns by setting its column span.

The possible combinations are shown below:

<vaadin-board>
  <vaadin-board-row>
    <div class="cell" board-cols="2">Span 2</div>
    <div class="cell">Span 1</div>
    <div class="cell">Span 1</div>
  </vaadin-board-row>
  <vaadin-board-row>
    <div class="cell">Span 1</div>
    <div class="cell" board-cols="2">Span 2</div>
    <div class="cell">Span 1</div>
  </vaadin-board-row>
  <vaadin-board-row>
    <div class="cell">Span 1</div>
    <div class="cell">Span 1</div>
    <div class="cell" board-cols="2">Span 2</div>
  </vaadin-board-row>
</vaadin-board>
<vaadin-board>
  <vaadin-board-row>
    <div class="cell" board-cols="3">Span 3</div>
    <div class="cell">Span 1</div>
  </vaadin-board-row>
  <vaadin-board-row>
    <div class="cell">Span 1</div>
    <div class="cell" board-cols="3">Span 3</div>
  </vaadin-board-row>
</vaadin-board>
<vaadin-board>
  <vaadin-board-row>
    <div class="cell" board-cols="2">Span 2</div>
    <div class="cell">Span 1</div>
  </vaadin-board-row>
  <vaadin-board-row>
    <div class="cell">Span 1</div>
    <div class="cell" board-cols="2">Span 2</div>
  </vaadin-board-row>
</vaadin-board>

Breakpoints

Board adjusts its layout based on the viewport width. The following three viewport widths, called breakpoints, trigger a layout change:

BreakpointViewport widthMax number of columns

large

≥ 960 pixels

4

medium

600–959 pixels

2 or 3[1]

small

< 600 pixels

1

The breakpoints can be customized by overriding the CSS custom properties named --vaadin-board-width-small and --vaadin-board-width-medium.

Breakpoint-Specific Styling

You can apply different styles for each breakpoint, for example to change the font size and space between components.

Important
Use the draggable split handle to resize the layout and see how the board styling changes on different breakpoints.
static get styles() {
  return [
    defaultCellCSS,
    css`
      :host {
        --vaadin-board-width-small: 150px;
        --vaadin-board-width-medium: 220px;
      }

      vaadin-board-row.large > .cell {
        background: var(--lumo-success-color-10pct);
        color: var(--lumo-success-color);
      }

      vaadin-board-row.medium > .cell {
        background: var(--lumo-primary-color-10pct);
        color: var(--lumo-primary-color);
      }

      vaadin-board-row.small > .cell {
        background: var(--lumo-error-color-10pct);
        color: var(--lumo-error-color);
      }

      @media (min-width: 1024px) {
        :host {
          --vaadin-board-width-small: 300px;
          --vaadin-board-width-medium: 400px;
        }
      }
    `,
  ];
}
render() {
  return html`
    <vaadin-split-layout>
      <vaadin-board style="width: 100%">
        <vaadin-board-row>
          <div class="cell">Cell 1</div>
          <div class="cell">Cell 2</div>
          <div class="cell">Cell 3</div>
          <div class="cell">Cell 4</div>
        </vaadin-board-row>
      </vaadin-board>
      <div></div>
    </vaadin-split-layout>
  `;
}

1. A row with three equal-width components won’t wrap until the small breakpoint.