Docs

Docs

Styling Other UI Elements

Describes how to apply styles to common and uncommon HTML elements.

Native HTML elements like divs and spans, as well as Vaadin layouts like Vertical Layout and Form Layout, can be styled in two ways: by applying CSS to them, and with Lumo utility classes.

Applying CSS to Other UI Elements

You can apply CSS class names to any UI element and write CSS with corresponding selectors, like you do with Vaadin components.

Div appHeader = new Div();
appHeader.addClassName("app-header");
.app-header {
  background: var(--lumo-primary-color);
  color: white;
  display: flex;
}

Styling with Lumo Utility Classes

Lumo Utility Classes are predefined CSS class names and stylesheets – similar to the popular Tailwind CSS library – that can be used to style HTML elements and layouts without writing CSS yourself. Each utility class applies a particular style to the element, such as background color, borders, fonts, sizing, or spacing. Classes for applying CSS flexbox and grid layout features are also available.

Utility classes are applied similarly to custom CSS class names. The LumoUtility class in Flow has constants for all utility classes.

Div appHeader = new Div();
appHeader.addClassNames(LumoUtility.Background.PRIMARY, LumoUtility.TextColor.PRIMARY_CONTRAST, LumoUtility.Display.FLEX);
Note

Lumo Utility Classes are for HTML elements, not for Vaadin components. The Lumo utility classes are primarily designed to be used with native HTML elements, Vaadin layout components and custom UI structures. Although some of them do work as expected on some Vaadin components, this is not their intended use. They especially cannot be used to style the inner parts of components.