Board

Board is a powerful and easy-to-use layout element for building views that work with various screen sizes.

Responsive
Rows & Columns
Breakpoints

Note	Commercial Feature A commercial Vaadin subscription is required to use Board in your project. Start Free Trial See Pricing

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 maximizing the use of available space.

Open in a
new tab

Source code

BoardBasic.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.board.Board;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("board-basic")
public class BoardBasic extends Div {

    public BoardBasic() {
        // tag::snippet[]
        Board board = new Board();
        board.addRow(new ExampleIndicator("Current users", "745", "+33.7"),
                new ExampleIndicator("View events", "54.6k", "-112.45"),
                new ExampleIndicator("Conversion rate", "18%", "+3.9"),
                new ExampleIndicator("Custom metric", "-123.45"));
        board.addRow(new ExampleChart());
        // end::snippet[]

        add(board);
        addClassName("basic-board");
    }

}
ExampleIndicator.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;

@Tag("example-indicator")
public class ExampleIndicator extends Component {
    public ExampleIndicator(String title, String current, String change) {
        this.getElement().setAttribute("title", title)
                .setAttribute("current", current)
                .setAttribute("change", change);
    }

    public ExampleIndicator(String title, String current) {
        this.getElement().setAttribute("title", title).setAttribute("current",
                current);
    }
}
ExampleIndicator.java
ExampleChart.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;

@Tag("example-chart")
public class ExampleChart extends Component {
}
ExampleChart.java
board-basic.tsximport React from 'react';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
import boardStyles from './board-styles';
import ExampleChart from './ExampleChart';
import ExampleIndicator from './ExampleIndicator';

function Example() {
  return (
    <Board className="basic-board">
      {/* tag::snippet[] */}
      <BoardRow>
        <ExampleIndicator current="745" change={+33.7} title="Current users" />
        <ExampleIndicator current="54.6k" change={-112.45} title="View events" />
        <ExampleIndicator current="18%" change={+3.9} title="Conversion rate" />
        <ExampleIndicator current="-123.45" title="Custom metric" />
      </BoardRow>
      <BoardRow>
        <ExampleChart />
      </BoardRow>
      {/* end::snippet[] */}
    </Board>
  );
}

ExampleChart.tsximport React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
import { getViewEvents } from 'Frontend/demo/domain/DataService';
import type ViewEvent from 'Frontend/generated/com/vaadin/demo/domain/ViewEvent';

const titleStyle = {
  fontSize: 'var(--lumo-font-size-l)',
  fontWeight: 700,
  marginBlockEnd: 'var(--lumo-space-m)',
};

// tag::snippet[]
const monthNames = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const chartOptions = {
  xAxis: { crosshair: true },
  yAxis: { min: 0 },
};

function Example() {
  const events = useSignal<ViewEvent[]>([]);
  useEffect(() => {
    getViewEvents().then((viewEvents) => {
      events.value = viewEvents;
    });
  }, []);

  return (
    <div>
      <header style={titleStyle}>View events</header>

      <Chart additionalOptions={chartOptions} categories={monthNames} type="area">
        {events.value.map(({ id, city, data }) => (
          <ChartSeries title={city} values={data} key={id} />
        ))}
      </Chart>
    </div>
  );
}
// end::snippet[]

ExampleIndicator.tsximport '@vaadin/icons';
import React, { useMemo } from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';

// tag::snippet[]
function ExampleIndicator({ title = 'Unknown', current = '0', change = 0 }) {
  let theme;
  let icon;
  let sign;

  if (change === 0) {
    theme = '';
    icon = 'circle-thin';
    sign = '±';
  } else if (change < 0) {
    theme = 'error';
    icon = 'arrow-down';
    sign = '-';
  } else {
    theme = 'success';
    icon = 'arrow-up';
    sign = '+';
  }

  return (
    <VerticalLayout className="example-indicator">
      <div className="title">{title}</div>
      <div className="current">{current}</div>
      <span className={`icon badge`} {...{ theme: `badge ${theme}` }}>
        <Icon icon={`vaadin:${icon}`} />
        <span>
          {sign}
          {Math.abs(change).toFixed(2)}%
        </span>
      </span>
    </VerticalLayout>
  );
}
// end::snippet[]

export default ExampleIndicator;
board-basic.tsimport '@vaadin/board';
import './example-indicator';
import './example-chart';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('board-basic')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('basic-board');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}
example-indicator.tsimport '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/vertical-layout';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('example-indicator')
export class ExampleIndicator extends LitElement {
  static override styles = css`
    .title {
      margin: 0;
      font-size: var(--lumo-font-size-xxs);
      font-weight: 700;
      color: var(--lumo-contrast-50pct);
    }

    .current {
      font-size: var(--lumo-font-size-m);
      font-weight: 700;
    }

    .icon {
      font-size: var(--lumo-font-size-xxs);
    }

    .icon vaadin-icon {
      --vaadin-icon-width: var(--lumo-font-size-xxs);
      --vaadin-icon-height: var(--lumo-font-size-xxs);
    }

    @media (min-width: 1024px) {
      .title {
        font-size: var(--lumo-font-size-xxs);
      }

      .current {
        font-size: var(--lumo-font-size-xl);
      }

      .icon {
        font-size: var(--lumo-font-size-m);
      }

      .icon vaadin-icon {
        --vaadin-icon-width: var(--lumo-font-size-xs);
        --vaadin-icon-height: var(--lumo-font-size-xs);
      }
    }
  `;

  @property()
  title = 'Unknown';

  @property()
  current = '0';

  @property({ type: Number })
  change = 0;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    let theme;
    let icon;
    let sign;

    if (this.change === 0) {
      theme = '';
      icon = 'circle-thin';
      sign = '±';
    } else if (this.change < 0) {
      theme = 'error';
      icon = 'arrow-down';
      sign = '-';
    } else {
      theme = 'success';
      icon = 'arrow-up';
      sign = '+';
    }

    return html`
      <vaadin-vertical-layout>
        <div class="title">${this.title}</div>
        <div class="current">${this.current}</div>
        <span class="icon" theme="badge ${theme}">
          <vaadin-icon icon="vaadin:${icon}"></vaadin-icon>
          <span>${sign}${Math.abs(this.change).toFixed(2)}%</span>
        </span>
      </vaadin-vertical-layout>
    `;
  }
}
example-indicator.ts
example-chart.tsimport '@vaadin/charts';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { getViewEvents } from 'Frontend/demo/domain/DataService';
import type ViewEvent from 'Frontend/generated/com/vaadin/demo/domain/ViewEvent';

const monthNames = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const chartOptions = {
  xAxis: { crosshair: true },
  yAxis: { min: 0 },
};

@customElement('example-chart')
export class Example extends LitElement {
  static override styles = css`
    .title {
      font-size: var(--lumo-font-size-l);
      font-weight: 700;
      margin-block-end: var(--lumo-space-m);
    }
  `;

  @state()
  private events: ViewEvent[] = [];

  protected override async firstUpdated() {
    this.events = await getViewEvents();
  }

  protected override render() {
    return html`
      <header class="title">View events</header>
      <vaadin-chart .additionalOptions="${chartOptions}" .categories="${monthNames}" type="area">
        ${repeat(
          this.events,
          ({ id }) => id,
          ({ city, data }) =>
            html`<vaadin-chart-series .title="${city}" .values="${data}"></vaadin-chart-series>`
        )}
      </vaadin-chart>
    `;
  }
}
example-chart.ts

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

Responsive

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

Rows & Columns

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

Nested Rows

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

Open in a
new tab

Source code

BoardNested.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.board.Board;
import com.vaadin.flow.component.board.Row;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("board-nested")
public class BoardNested extends Div {
    public BoardNested() {
        // tag::snippet[]
        Row rootRow = new Row();
        rootRow.add(new ExampleStatistics(), 2);

        Row nestedRow = new Row(
                new ExampleIndicator("Current users", "745", "+33.7"),
                new ExampleIndicator("Conversion rate", "18%", "+3.9"));
        rootRow.addNestedRow(nestedRow);

        Board board = new Board();
        board.add(rootRow);
        // end::snippet[]

        add(board);
        this.setClassName("board-nested");
    }

}
ExampleIndicator.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;

@Tag("example-indicator")
public class ExampleIndicator extends Component {
    public ExampleIndicator(String title, String current, String change) {
        this.getElement().setAttribute("title", title)
                .setAttribute("current", current)
                .setAttribute("change", change);
    }

    public ExampleIndicator(String title, String current) {
        this.getElement().setAttribute("title", title).setAttribute("current",
                current);
    }
}
ExampleIndicator.java
ExampleStatistics.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;

@Tag("example-statistics")
public class ExampleStatistics extends Component {
}
ExampleStatistics.java
board-nested.tsximport React from 'react';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
import boardStyles from './board-styles';
import ExampleIndicator from './ExampleIndicator';
import ExampleStatistics from './ExampleStatistics';

function Example() {
  return (
    // tag::snippet[]
    <Board className="board-nested">
      <BoardRow>
        <div {...{ 'board-cols': 2 }}>
          <ExampleStatistics {...{ 'board-cols': 2 }} />
        </div>
        <BoardRow {...{ 'board-cols': 1 }}>
          <ExampleIndicator current="745" change={+33.7} title="Current users" />
          <ExampleIndicator current="18%" change={+3.9} title="Conversion rate" />
        </BoardRow>
      </BoardRow>
    </Board>
    // end::snippet[]
  );
}

ExampleIndicator.tsximport '@vaadin/icons';
import React, { useMemo } from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';

// tag::snippet[]
function ExampleIndicator({ title = 'Unknown', current = '0', change = 0 }) {
  let theme;
  let icon;
  let sign;

  if (change === 0) {
    theme = '';
    icon = 'circle-thin';
    sign = '±';
  } else if (change < 0) {
    theme = 'error';
    icon = 'arrow-down';
    sign = '-';
  } else {
    theme = 'success';
    icon = 'arrow-up';
    sign = '+';
  }

  return (
    <VerticalLayout className="example-indicator">
      <div className="title">{title}</div>
      <div className="current">{current}</div>
      <span className={`icon badge`} {...{ theme: `badge ${theme}` }}>
        <Icon icon={`vaadin:${icon}`} />
        <span>
          {sign}
          {Math.abs(change).toFixed(2)}%
        </span>
      </span>
    </VerticalLayout>
  );
}
// end::snippet[]

export default ExampleIndicator;
ExampleStatistics.tsximport React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { getServiceHealth } from 'Frontend/demo/domain/DataService';
import type ServiceHealth from 'Frontend/generated/com/vaadin/demo/domain/ServiceHealth';

// tag::snippet[]
function ExampleStatistics() {
  const serviceHealth = useSignal<ServiceHealth[]>([]);
  useEffect(() => {
    getServiceHealth().then((health) => {
      serviceHealth.value = health;
    });
  }, []);

  return (
    <div className="statistics">
      <header className="title">Service health</header>
      <section className="legend">
        <label>
          <span className="level excellent"></span>
          Excellent
        </label>
        <label>
          <span className="level ok"></span>
          Ok
        </label>
        <label>
          <span className="level failing"></span>
          Failing
        </label>
      </section>
      <div className="table">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>City</th>
              <th>Input</th>
              <th>Output</th>
            </tr>
          </thead>
          <tbody>
            {serviceHealth.value.map(({ id, city, input, output }) => (
              <tr key={id}>
                <td>
                  <span className="level ok" />
                </td>
                <td>{city}</td>
                <td className="number">{input}</td>
                <td className="number">{output}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
// end::snippet[]

export default ExampleStatistics;
board-nested.tsimport '@vaadin/board';
import './example-indicator';
import './example-statistics';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('board-nested')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('board-nested');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}
example-indicator.tsimport '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/vertical-layout';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('example-indicator')
export class ExampleIndicator extends LitElement {
  static override styles = css`
    .title {
      margin: 0;
      font-size: var(--lumo-font-size-xxs);
      font-weight: 700;
      color: var(--lumo-contrast-50pct);
    }

    .current {
      font-size: var(--lumo-font-size-m);
      font-weight: 700;
    }

    .icon {
      font-size: var(--lumo-font-size-xxs);
    }

    .icon vaadin-icon {
      --vaadin-icon-width: var(--lumo-font-size-xxs);
      --vaadin-icon-height: var(--lumo-font-size-xxs);
    }

    @media (min-width: 1024px) {
      .title {
        font-size: var(--lumo-font-size-xxs);
      }

      .current {
        font-size: var(--lumo-font-size-xl);
      }

      .icon {
        font-size: var(--lumo-font-size-m);
      }

      .icon vaadin-icon {
        --vaadin-icon-width: var(--lumo-font-size-xs);
        --vaadin-icon-height: var(--lumo-font-size-xs);
      }
    }
  `;

  @property()
  title = 'Unknown';

  @property()
  current = '0';

  @property({ type: Number })
  change = 0;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    let theme;
    let icon;
    let sign;

    if (this.change === 0) {
      theme = '';
      icon = 'circle-thin';
      sign = '±';
    } else if (this.change < 0) {
      theme = 'error';
      icon = 'arrow-down';
      sign = '-';
    } else {
      theme = 'success';
      icon = 'arrow-up';
      sign = '+';
    }

    return html`
      <vaadin-vertical-layout>
        <div class="title">${this.title}</div>
        <div class="current">${this.current}</div>
        <span class="icon" theme="badge ${theme}">
          <vaadin-icon icon="vaadin:${icon}"></vaadin-icon>
          <span>${sign}${Math.abs(this.change).toFixed(2)}%</span>
        </span>
      </vaadin-vertical-layout>
    `;
  }
}
example-indicator.ts
example-statistics.tsimport { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { getServiceHealth } from 'Frontend/demo/domain/DataService';
import type ServiceHealth from 'Frontend/generated/com/vaadin/demo/domain/ServiceHealth';

@customElement('example-statistics')
export class ExampleStatistics extends LitElement {
  static override styles = css`
    :host {
      display: flex;
      flex-direction: column;
      font-size: var(--lumo-font-size-s);
    }

    .level {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .level::before {
      content: '';
      width: var(--lumo-font-size-xxs);
      height: var(--lumo-font-size-xxs);
      border-radius: 50%;
    }

    .excellent::before {
      background-color: var(--lumo-success-color);
    }

    .ok::before {
      background-color: var(--lumo-primary-color);
    }

    .failing::before {
      background-color: var(--lumo-error-color);
    }

    .legend {
      display: flex;
    }

    .legend label {
      display: flex;
      align-items: center;
      margin-inline-end: var(--lumo-space-m);
    }

    .legend .level {
      margin-inline-end: var(--lumo-space-s);
    }

    .title {
      font-size: var(--lumo-font-size-l);
      font-weight: 700;
    }

    .table {
      overflow: auto;
      flex-grow: 1;
    }

    .table table {
      width: 100%;
      margin-block-start: var(--lumo-space-s);
    }

    .table .number {
      text-align: end;
    }

    .table th,
    .table td {
      white-space: nowrap;
    }
  `;

  @state()
  private serviceHealth: ServiceHealth[] = [];

  protected override async firstUpdated() {
    this.serviceHealth = await getServiceHealth();
  }

  protected override render() {
    return html`
      <header class="title">Service health</header>
      <section class="legend">
        <label>
          <span class="level excellent"></span>
          Excellent
        </label>
        <label>
          <span class="level ok"></span>
          Ok
        </label>
        <label>
          <span class="level failing"></span>
          Failing
        </label>
      </section>
      <div class="table">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>City</th>
              <th>Input</th>
              <th>Output</th>
            </tr>
          </thead>
          <tbody>
            ${repeat(
              this.serviceHealth,
              ({ id }) => id,
              ({ city, input, output }) => html`
                <tr>
                  <td>
                    <span class="level ok"></span>
                  </td>
                  <td>${city}</td>
                  <td class="number">${input}</td>
                  <td class="number">${output}</td>
                </tr>
              `
            )}
          </tbody>
        </table>
      </div>
    `;
  }
}
example-statistics.ts

Column Wrapping

Columns automatically wrap on to new lines as the viewport narrows. The wrapping behavior 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.

Open in a
new tab

Source code

BoardColumnWrapping.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.board.Board;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.router.Route;

@Route("board-column-wrapping")
public class BoardColumnWrapping extends Div {

    public BoardColumnWrapping() {
        // tag::snippet[]
        Board board = new Board();
        board.addRow(createCell("Cell 1"), createCell("Cell 2"),
                createCell("Cell 3"), createCell("Cell 4"));

        SplitLayout splitLayout = new SplitLayout(board, new Div());
        // end::snippet[]

        addClassName("board-column-wrapping");
        add(splitLayout);
    }

    private static Div createCell(String text) {
        Div div = new Div();
        div.setText(text);
        div.addClassNames("cell", "color");

        return div;
    }

}
board-column-wrapping.tsximport React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
import boardStyles from './board-styles';

function Example() {
  return (
    // tag::snippet[]
    <SplitLayout className="board-column-wrapping">
      <Board style={{ width: '100%' }}>
        <BoardRow className="row">
          <div className="cell color">Cell 1</div>
          <div className="cell color">Cell 2</div>
          <div className="cell color">Cell 3</div>
          <div className="cell color">Cell 4</div>
        </BoardRow>
      </Board>
      <div></div>
    </SplitLayout>
    // end::snippet[]
  );
}

board-column-wrapping.tsimport '@vaadin/board';
import '@vaadin/split-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('board-column-wrapping')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('board-column-wrapping');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}

Column Span

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

The possible combinations are shown below:

Open in a
new tab

Source code

BoardColumnSpan.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.board.Board;
import com.vaadin.flow.component.board.Row;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("board-column-span")
public class BoardColumnSpan extends Div {

    public BoardColumnSpan() {
        // tag::snippet[]
        Board board1 = createBoard1();
        Board board2 = createBoard2();
        Board board3 = createBoard3();
        // end::snippet[]

        addClassName("board-column-span");
        add(board1, board2, board3);
    }

    private static Board createBoard1() {
        Row row1 = new Row();
        row1.add(createCell("Span 2"), 2);
        row1.add(createCell("Span 1"));
        row1.add(createCell("Span 1"));

        Row row2 = new Row();
        row2.add(createCell("Span 1"));
        row2.add(createCell("Span 2"), 2);
        row2.add(createCell("Span 1"));

        Row row3 = new Row();
        row3.add(createCell("Span 1"));
        row3.add(createCell("Span 1"));
        row3.add(createCell("Span 2"), 2);

        Board board = new Board();
        board.add(row1, row2, row3);

        return board;
    }

    private static Board createBoard2() {
        Row row1 = new Row();
        row1.add(createCell("Span 3"), 3);
        row1.add(createCell("Span 1"));

        Row row2 = new Row();
        row2.add(createCell("Span 1"));
        row2.add(createCell("Span 3"), 3);

        Board board = new Board();
        board.add(row1, row2);

        return board;
    }

    private static Board createBoard3() {
        Row row1 = new Row();
        row1.add(createCell("Span 2"), 2);
        row1.add(createCell("Span 1"));

        Row row2 = new Row();
        row2.add(createCell("Span 1"));
        row2.add(createCell("Span 2"), 2);

        Board board = new Board();
        board.add(row1, row2);

        return board;
    }

    private static Div createCell(String text) {
        Div div = new Div();
        div.setText(text);
        div.addClassNames("cell");

        return div;
    }

}
board-column-span.tsximport React from 'react';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
import boardStyles from './board-styles';

function Example() {
  return (
    <>
      {/* tag::snippet[] */}
      <Board className="board-column-span">
        <BoardRow>
          <div className="cell" {...{ 'board-cols': '2' }}>
            Span 2
          </div>
          <div className="cell">Span 1</div>
          <div className="cell">Span 1</div>
        </BoardRow>
        <BoardRow>
          <div className="cell">Span 1</div>
          <div className="cell" {...{ 'board-cols': '2' }}>
            Span 2
          </div>
          <div className="cell">Span 1</div>
        </BoardRow>
        <BoardRow>
          <div className="cell">Span 1</div>
          <div className="cell">Span 1</div>
          <div className="cell" {...{ 'board-cols': '2' }}>
            Span 2
          </div>
        </BoardRow>
      </Board>

      <Board className="board-column-span">
        <BoardRow>
          <div className="cell" {...{ 'board-cols': '3' }}>
            Span 3
          </div>
          <div className="cell">Span 1</div>
        </BoardRow>
        <BoardRow>
          <div className="cell">Span 1</div>
          <div className="cell" {...{ 'board-cols': '3' }}>
            Span 3
          </div>
        </BoardRow>
      </Board>

      <Board className="board-column-span">
        <BoardRow>
          <div className="cell" {...{ 'board-cols': '2' }}>
            Span 2
          </div>
          <div className="cell">Span 1</div>
        </BoardRow>
        <BoardRow>
          <div className="cell">Span 1</div>
          <div className="cell" {...{ 'board-cols': '2' }}>
            Span 2
          </div>
        </BoardRow>
      </Board>
      {/* end::snippet[] */}
    </>
  );
}

board-column-span.tsimport '@vaadin/board';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('board-column-span')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('board-column-span');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}

Breakpoints

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

Breakpoint	Container width	Max number of columns
large	≥ 960 pixels	4
medium	600–959 pixels	2 or 3^[1]
small	< 600 pixels	1

Breakpoint

Container width

Max number of columns

large

≥ 960 pixels

medium

600–959 pixels

2 or 3^[1]

small

< 600 pixels

Breakpoints can be customized by overriding the CSS custom properties --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 at different breakpoints.

Open in a
new tab

Source code

BoardBreakpoints.javapackage com.vaadin.demo.component.board;

import com.vaadin.flow.component.board.Board;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.router.Route;

@Route("board-breakpoints")
public class BoardBreakpoints extends Div {
    public BoardBreakpoints() {
        // tag::snippet[]
        Board board = new Board();

        // styles are defined separately, check the board.css snippet
        board.addRow(createCell("Cell 1"), createCell("Cell 2"),
                createCell("Cell 3"), createCell("Cell 4"));

        SplitLayout splitLayout = new SplitLayout(board, new Div());
        // end::snippet[]

        addClassName("board-breakpoints");
        add(splitLayout);
    }

    private Div createCell(String text) {
        Div div = new Div();
        div.setText(text);
        div.addClassNames("cell");
        return div;
    }

}
board.css/****************************
 * board basic
 ****************************/
.basic-board,
:host(.basic-board) {
    --board-border: 1px solid var(--lumo-contrast-10pct);
    --vaadin-board-width-small: 200px;
    --vaadin-board-width-medium: 400px;
}

.basic-board vaadin-board-row:not(:last-child),
:host(.basic-board) vaadin-board-row:not(:last-child) {
    border-block-end: var(--board-border);
}

.basic-board example-indicator,
:host(.basic-board) example-indicator {
    padding: var(--lumo-space-m);
}

.basic-board example-indicator:not(:nth-child(2n)),
:host(.basic-board) example-indicator:not(:nth-child(2n)) {
    border-inline-end: var(--board-border);
}

@media (min-width: 1024px) {
    .basic-board,
    :host(.basic-board) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }

    .basic-board example-indicator:not(:last-child),
    :host(.basic-board) example-indicator:not(:last-child) {
        border-inline-end: var(--board-border);
    }
}

/****************************
 * board nested
 ****************************/
.board-nested,
:host(.board-nested) {
    --board-border: 1px solid var(--lumo-contrast-10pct);
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
}

.board-nested example-statistics,
:host(.board-nested) example-statistics {
    padding-inline-end: var(--lumo-space-m);
    border-inline-end: var(--board-border);
}

.board-nested example-indicator,
:host(.board-nested) example-indicator {
    padding: var(--lumo-space-s);
}

.board-nested example-indicator:first-child,
:host(.board-nested) example-indicator:first-child {
    border-block-end: var(--board-border);
}

@media (min-width: 1024px) {
    .board-nested example-indicator,
    :host(.board-nested) example-indicator {
        padding: var(--lumo-space-m);
    }

    .board-nested,
    :host(.board-nested) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

/****************************
 * board-column-wrapping
 ****************************/
.board-column-wrapping,
:host(.board-column-wrapping) {
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
    --board-blue-10: #0090c0;
    --board-blue-20: #006c90;
    --board-blue-30: #00506b;
    --board-blue-40: #003e53;
}

@media (min-width: 1024px) {
    .board-column-wrapping,
    :host(.board-column-wrapping) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

.board-column-wrapping .cell,
:host(.board-column-wrapping) .cell {
    padding: 1em 0.3em;
    text-align: center;
    color: white;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .board-column-wrapping .cell,
    :host(.board-column-wrapping) .cell {
        padding: 1em;
    }
}

.board-column-wrapping .color:nth-child(1),
:host(.board-column-wrapping) .color:nth-child(1) {
    background: var(--board-blue-40);
}

.board-column-wrapping .color:nth-child(2),
:host(.board-column-wrapping) .color:nth-child(2) {
    background: var(--board-blue-30);
}

.board-column-wrapping .color:nth-child(3),
:host(.board-column-wrapping) .color:nth-child(3) {
    background: var(--board-blue-20);
}

.board-column-wrapping .color:nth-child(4),
:host(.board-column-wrapping) .color:nth-child(4) {
    background: var(--board-blue-10);
}

/****************************
 * board-column-span
 ****************************/
.board-column-span,
:host(.board-column-span) {
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
    --board-blue-10: #0090c0;
    --board-blue-20: #006c90;
    --board-blue-30: #00506b;
    --board-blue-40: #003e53;
    --board-inner-border: 1px dashed white;
}

@media (min-width: 1024px) {
    .board-column-span,
    :host(.board-column-span) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

.board-column-span vaadin-board,
:host(.board-column-span) vaadin-board {
    padding: var(--lumo-space-m) 0;
}

.board-column-span .cell,
:host(.board-column-span) .cell {
    padding: 1em 0.3em;
    text-align: center;
    color: white;
    white-space: nowrap;

    background: var(--board-blue-20);
}

@media (min-width: 1024px) {
    .board-column-span .cell,
    :host(.board-column-span) .cell {
        padding: 1em;
    }
}

.board-column-span .color:nth-child(1),
:host(.board-column-span) .color:nth-child(1) {
    background: var(--board-blue-40);
}

.board-column-span .color:nth-child(2),
:host(.board-column-span) .color:nth-child(2) {
    background: var(--board-blue-30);
}

.board-column-span .color:nth-child(3),
:host(.board-column-span) .color:nth-child(3) {
    background: var(--board-blue-20);
}

.board-column-span .color:nth-child(4),
:host(.board-column-span) .color:nth-child(4) {
    background: var(--board-blue-10);
}

.board-column-span .cell[board-cols='3'],
:host(.board-column-span) .cell[board-cols='3'] {
    background: var(--board-blue-40);
}

.board-column-span .cell[board-cols='2'],
:host(.board-column-span) .cell[board-cols='2'] {
    background: var(--board-blue-30);
}

.board-column-span .cell:not(:last-child),
:host(.board-column-span) .cell:not(:last-child) {
    border-inline-end: var(--board-inner-border);
}

.board-column-span vaadin-board-row:not(:last-child) .cell,
:host(.board-column-span) vaadin-board-row:not(:last-child) .cell {
    border-block-end: var(--board-inner-border);
}

/****************************
 * board-breakpoints
 ****************************/
.board-breakpoints,
:host(.board-breakpoints) {
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
}

@media (min-width: 1024px) {
    .board-breakpoints,
    :host(.board-breakpoints) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

.board-breakpoints vaadin-board-row.large > .cell,
:host(.board-breakpoints)
    /* tag::breakpoint[] */
/* should be added to frontend/theme/[my-theme]/styles.css */
vaadin-board-row.large > .cell {
    background: var(--lumo-success-color-10pct);
    color: var(--lumo-success-color);
}

/* end::breakpoint[] */

.board-breakpoints vaadin-board-row.medium > .cell,
:host(.board-breakpoints)
    /* tag::breakpoint[] */
vaadin-board-row.medium > .cell {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-color);
}

/* end::breakpoint[] */

.board-breakpoints vaadin-board-row.small > .cell,
:host(.board-breakpoints)
    /* tag::breakpoint[] */
vaadin-board-row.small > .cell {
    background: var(--lumo-error-color-10pct);
    color: var(--lumo-error-color);
}

/* end::breakpoint[] */

.board-breakpoints .cell,
:host(.board-breakpoints) .cell {
    padding: 1em 0.3em;
    text-align: center;
    color: white;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .board-breakpoints .cell,
    :host(.board-breakpoints) .cell {
        padding: 1em;
    }
}
board-breakpoints.tsximport React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
import boardStyles from './board-styles';

function Example() {
  // tag::snippet[]
  return (
    <SplitLayout className="board-breakpoints">
      <Board style={{ width: '100%' }}>
        <BoardRow>
          <div className="cell">Cell 1</div>
          <div className="cell">Cell 2</div>
          <div className="cell">Cell 3</div>
          <div className="cell">Cell 4</div>
        </BoardRow>
      </Board>
      <div></div>
    </SplitLayout>
  );
  // end::snippet[]
}

board-breakpoints.tsimport '@vaadin/board';
import '@vaadin/split-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('board-breakpoints')
export class Example extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.classList.add('board-breakpoints');
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  protected override render() {
    return html`
      <vaadin-split-layout>
        <vaadin-board style="width: 100%">
          <!-- styles are defined separately, check the board.css snippet -->
          <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>
    `;
  }
  // end::snippet[]
}
board.css/****************************
 * board basic
 ****************************/
.basic-board,
:host(.basic-board) {
    --board-border: 1px solid var(--lumo-contrast-10pct);
    --vaadin-board-width-small: 200px;
    --vaadin-board-width-medium: 400px;
}

.basic-board vaadin-board-row:not(:last-child),
:host(.basic-board) vaadin-board-row:not(:last-child) {
    border-block-end: var(--board-border);
}

.basic-board example-indicator,
:host(.basic-board) example-indicator {
    padding: var(--lumo-space-m);
}

.basic-board example-indicator:not(:nth-child(2n)),
:host(.basic-board) example-indicator:not(:nth-child(2n)) {
    border-inline-end: var(--board-border);
}

@media (min-width: 1024px) {
    .basic-board,
    :host(.basic-board) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }

    .basic-board example-indicator:not(:last-child),
    :host(.basic-board) example-indicator:not(:last-child) {
        border-inline-end: var(--board-border);
    }
}

/****************************
 * board nested
 ****************************/
.board-nested,
:host(.board-nested) {
    --board-border: 1px solid var(--lumo-contrast-10pct);
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
}

.board-nested example-statistics,
:host(.board-nested) example-statistics {
    padding-inline-end: var(--lumo-space-m);
    border-inline-end: var(--board-border);
}

.board-nested example-indicator,
:host(.board-nested) example-indicator {
    padding: var(--lumo-space-s);
}

.board-nested example-indicator:first-child,
:host(.board-nested) example-indicator:first-child {
    border-block-end: var(--board-border);
}

@media (min-width: 1024px) {
    .board-nested example-indicator,
    :host(.board-nested) example-indicator {
        padding: var(--lumo-space-m);
    }

    .board-nested,
    :host(.board-nested) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

/****************************
 * board-column-wrapping
 ****************************/
.board-column-wrapping,
:host(.board-column-wrapping) {
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
    --board-blue-10: #0090c0;
    --board-blue-20: #006c90;
    --board-blue-30: #00506b;
    --board-blue-40: #003e53;
}

@media (min-width: 1024px) {
    .board-column-wrapping,
    :host(.board-column-wrapping) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

.board-column-wrapping .cell,
:host(.board-column-wrapping) .cell {
    padding: 1em 0.3em;
    text-align: center;
    color: white;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .board-column-wrapping .cell,
    :host(.board-column-wrapping) .cell {
        padding: 1em;
    }
}

.board-column-wrapping .color:nth-child(1),
:host(.board-column-wrapping) .color:nth-child(1) {
    background: var(--board-blue-40);
}

.board-column-wrapping .color:nth-child(2),
:host(.board-column-wrapping) .color:nth-child(2) {
    background: var(--board-blue-30);
}

.board-column-wrapping .color:nth-child(3),
:host(.board-column-wrapping) .color:nth-child(3) {
    background: var(--board-blue-20);
}

.board-column-wrapping .color:nth-child(4),
:host(.board-column-wrapping) .color:nth-child(4) {
    background: var(--board-blue-10);
}

/****************************
 * board-column-span
 ****************************/
.board-column-span,
:host(.board-column-span) {
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
    --board-blue-10: #0090c0;
    --board-blue-20: #006c90;
    --board-blue-30: #00506b;
    --board-blue-40: #003e53;
    --board-inner-border: 1px dashed white;
}

@media (min-width: 1024px) {
    .board-column-span,
    :host(.board-column-span) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

.board-column-span vaadin-board,
:host(.board-column-span) vaadin-board {
    padding: var(--lumo-space-m) 0;
}

.board-column-span .cell,
:host(.board-column-span) .cell {
    padding: 1em 0.3em;
    text-align: center;
    color: white;
    white-space: nowrap;

    background: var(--board-blue-20);
}

@media (min-width: 1024px) {
    .board-column-span .cell,
    :host(.board-column-span) .cell {
        padding: 1em;
    }
}

.board-column-span .color:nth-child(1),
:host(.board-column-span) .color:nth-child(1) {
    background: var(--board-blue-40);
}

.board-column-span .color:nth-child(2),
:host(.board-column-span) .color:nth-child(2) {
    background: var(--board-blue-30);
}

.board-column-span .color:nth-child(3),
:host(.board-column-span) .color:nth-child(3) {
    background: var(--board-blue-20);
}

.board-column-span .color:nth-child(4),
:host(.board-column-span) .color:nth-child(4) {
    background: var(--board-blue-10);
}

.board-column-span .cell[board-cols='3'],
:host(.board-column-span) .cell[board-cols='3'] {
    background: var(--board-blue-40);
}

.board-column-span .cell[board-cols='2'],
:host(.board-column-span) .cell[board-cols='2'] {
    background: var(--board-blue-30);
}

.board-column-span .cell:not(:last-child),
:host(.board-column-span) .cell:not(:last-child) {
    border-inline-end: var(--board-inner-border);
}

.board-column-span vaadin-board-row:not(:last-child) .cell,
:host(.board-column-span) vaadin-board-row:not(:last-child) .cell {
    border-block-end: var(--board-inner-border);
}

/****************************
 * board-breakpoints
 ****************************/
.board-breakpoints,
:host(.board-breakpoints) {
    --vaadin-board-width-small: 150px;
    --vaadin-board-width-medium: 220px;
}

@media (min-width: 1024px) {
    .board-breakpoints,
    :host(.board-breakpoints) {
        --vaadin-board-width-small: 300px;
        --vaadin-board-width-medium: 400px;
    }
}

.board-breakpoints vaadin-board-row.large > .cell,
:host(.board-breakpoints)
    /* tag::breakpoint[] */
/* should be added to frontend/theme/[my-theme]/styles.css */
vaadin-board-row.large > .cell {
    background: var(--lumo-success-color-10pct);
    color: var(--lumo-success-color);
}

/* end::breakpoint[] */

.board-breakpoints vaadin-board-row.medium > .cell,
:host(.board-breakpoints)
    /* tag::breakpoint[] */
vaadin-board-row.medium > .cell {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-color);
}

/* end::breakpoint[] */

.board-breakpoints vaadin-board-row.small > .cell,
:host(.board-breakpoints)
    /* tag::breakpoint[] */
vaadin-board-row.small > .cell {
    background: var(--lumo-error-color-10pct);
    color: var(--lumo-error-color);
}

/* end::breakpoint[] */

.board-breakpoints .cell,
:host(.board-breakpoints) .cell {
    padding: 1em 0.3em;
    text-align: center;
    color: white;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .board-breakpoints .cell,
    :host(.board-breakpoints) .cell {
        padding: 1em;
    }
}

C2E98F9B-DC19-4C1D-8538-843235BA8701

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

Docs

Docs

Board

Responsive

Rows & Columns

Nested Rows

Column Wrapping

Column Span

Breakpoints

Breakpoint-Specific Styling