Docs

Docs

Board

Board is a powerful and easy-to-use layout element for building responsive views.
Note
Commercial feature

A commercial Vaadin subscription is required to use Board in your project.

The Board component reorders the components it contains for different screen sizes, while maximizing the use of available space. 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 that the components use all available space.

Rows & Columns

At a minimum, Board contains rows. Each row supports up to four columns and can contain up to four components. These are described below.

Nested Rows

Rows can be nested for increased control of how certain areas of the layout behave on resize, and how they’re rendered.

Column Wrapping

Columns wrap automatically on to new lines as the viewport narrows.

Column Span

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

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

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. You might do this, for example, to change the font size and space between components.

Important
 You can find more information in the corresponding article on vaadin.com.
1. A row with three equal-width components doesn’t wrap until the small breakpoint.