Lumo Utility Classes
Lumo includes a set of CSS utility classes that enable building any UI without custom CSS.
The classes are based on Lumo’s custom properties, which ensures a consistent-looking application. Although the classes can be used with Vaadin’s web components, they are primarily intended for creating layouts and styling text.
Usage
1. Import the Style Sheet
To use the classes, make sure that "utility"
is added to the "lumoImports"
entry in your application theme’s configuration theme.json
file.
{
"lumoImports": ["...", "utility"]
}
If you aren’t using a custom theme folder, you can import the utility class module manually.
You first need load the JavaScript module and then include it with a CSSImport
annotation:
@JsModule("@vaadin/vaadin-lumo-styles/utility.js")
@CssImport(value="some-stylesheet.css", include="lumo-utility")
2. Use the Classes
return html`
<header class="flex h-xl items-center px-l">
<h1 class="my-0 me-auto text-l">View Name</h1>
</header>
`;
Note
|
Lumo Utility Classes do not work in embedded overlays
Due to the way overlays, for example Dialogs or the Combo Box drop-down, are rendered in embedded Flow UIs, the Utility Classes do not work in them yet. See https://github.com/vaadin/flow/issues/16083 for details. |
Classes
A list of all the utility classes follows.
Important
|
LumoUtility Java API available from version 23.1
|
Accessibility
Accessibility related classes
Java class: LumoUtility.Accessibility
Preview | CSS class name / Java constant |
Screen reader only content |
|
Backgrounds
Classes for applying a background color.
Java class: LumoUtility.Background
Contrast
Preview | CSS class name / Java constant |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
Primary
Preview | CSS class name / Java constant |
| |
| |
|
Borders
Border related classes.
Java class: LumoUtility.Border
Preview | CSS class name / Java constant |
| |
| |
| |
| |
| |
|
Border Color
Classes for setting the border color of an element.
Java class: LumoUtility.BorderColor
Contrast
Preview | CSS class name / Java constant |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
Primary
Preview | CSS class name / Java constant |
| |
| |
|
Box Shadow
Classes for applying a box shadow.
Java class: LumoUtility.BoxShadow
Preview | CSS class name / Java constant |
| |
| |
| |
| |
|
Flexbox & Grid
Classes for flexbox and grid layouts.
Note
|
Remember to set
The following classes require setting either the display flex or grid CSS class on the element to work. See Display classes.
|
Align Content
Classes for distributing space around and between items along a flexbox’s cross axis or a grid’s block axis.
Applies to flexbox and grid layouts.
Java class: LumoUtility.AlignContent
Preview | CSS class name / Java constant |
1234 |
|
1234 |
|
1234 |
|
1234 |
|
1234 |
|
1234 |
|
1234 |
|
Align Items
Classes for aligning items along a flexbox’s cross axis or a grid’s block axis.
Applies to flexbox and grid layouts.
Java class: LumoUtility.AlignItems
Preview | CSS class name / Java constant |
123 |
|
123 |
|
123 |
|
123 |
|
123 |
|
Align Self
Classes for overriding individual items align-item
property.
Applies to flexbox and grid items.
Java class: LumoUtility.AlignSelf
Preview | CSS class name / Java constant |
123 |
|
123 |
|
123 |
|
123 |
|
123 |
|
123 |
|
Justify Content
Classes for aligning items along a flexbox’s main axis or a grid ’s inline axis.
Applies to flexbox and grid layouts.
Java class: LumoUtility.JustifyContent
Preview | CSS class name / Java constant |
12 |
|
12 |
|
12 |
|
12 |
|
12 |
|
12 |
|
Flex
Classes for setting how items grow and shrink in a flexbox layout.
Applies to flexbox items.
Java class: LumoUtility.Flex
Preview | CSS class name / Java constant |
1999 |
|
1999 |
|
Flex Direction
Classes for setting the flex direction of a flexbox layout.
Java class: LumoUtility.FlexDirection
Preview | CSS class name / Java constant |
123 |
|
123 |
|
123 |
|
123 |
|
Flex Grow
Classes for setting how items grow in a flexbox layout.
Applies to flexbox items.
Java class: LumoUtility.Flex
Preview | CSS class name / Java constant |
1 |
|
1 |
|
Flex Shrink
Classes for setting how items shrink in a flexbox layout.
Applies to flexbox items.
Java class: LumoUtility.Flex
Preview | CSS class name / Java constant |
56px |
|
56px |
|
Flex Wrap
Classes for setting how items wrap in a flexbox layout.
Applies to flexbox layouts.
Java class: LumoUtility.JustifyContent
Preview | CSS class name / Java constant |
1234 |
|
1234 |
|
1234 |
|
Gap
Classes for defining the space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.
Uniform
Java class: LumoUtility.Gap
Preview | CSS class name / Java constant |
1234 |
|
1234 |
|
1234 |
|
1234 |
|
1234 |
|
Grid Columns
Classes for setting the number of columns in a grid layout.
Java class: LumoUtility.Grid.Column
Preview | CSS class name / Java constant |
1234 |
|
1234 |
|
1234 |
|
1234 |
|
12345678 |
|
12345678 |
|
12345678 |
|
12345678 |
|
123456789101112 |
|
123456789101112 |
|
123456789101112 |
|
123456789101112 |
|
Grid Rows
Classes for setting the number of rows in a grid layout.
Java class: LumoUtility.Grid.Row
Preview | CSS class name / Java constant |
12345678 |
|
12345678 |
|
12345678 |
|
12345678 |
|
12345678 |
|
12345678 |
|
Spanning Columns
Classes for setting the column span of an item in a grid layout.
Java class: LumoUtility.Grid.Column
Preview | CSS class name / Java constant |
123456789101112 |
|
1234567891011121314151617181920212223 |
|
12345678910111213141516171819202122 |
|
123456789101112131415161718192021 |
|
1234567891011121314151617181920 |
|
12345678910111213141516171819 |
|
123456789101112131415161718 |
|
1234567891011121314151617 |
|
12345678910111213141516 |
|
123456789101112131415 |
|
1234567891011121314 |
|
12345678910111213 |
|
Spanning Rows
Classes for setting the row span of an item in a grid layout.
Java class: LumoUtility.Grid.Row
Preview | CSS class name / Java constant |
123456 |
|
1234567891011 |
|
12345678910 |
|
123456789 |
|
12345678 |
|
1234567 |
|
Layout
Classes for general layout purposes.
Box Sizing
Classes for setting the box sizing property of an element.
Box sizing determines whether an element’s border and padding is considered a part of its size.
Java class: LumoUtility.BoxSizing
Preview | CSS class name / Java constant |
Size: 44px |
|
Size: 44px |
|
Display
Classes for setting the display property of an element.
Determines whether the element is a block or inline element and how its items are laid out.
Java class: LumoUtility.Display
Preview | CSS class name / Java constant |
123 |
|
123 |
|
123 |
|
123 |
|
123 |
|
| |
123456789 |
|
123456789 |
|
Overflow
Classes for setting the overflow behavior of an element.
Java class: LumoUtility.Overflow
Preview | CSS class name / Java constant |
123Scrolls |
|
123No scroll |
|
123Scrolls |
|
Position
Classes for setting the position of an element.
Java class: LumoUtility.Position
Preview | CSS class name / Java constant |
RelativeAbsolute |
|
FixedLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
N/A |
|
Sticky 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sticky 2Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
N/A |
|
Sizing
Classes for setting the height and width of an element.
Height
Java class: LumoUtility.Height
Preview | CSS class name / Java constant |
N/A |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Auto |
|
Full |
|
Screen(scroll to see total height) |
|
Max Height
Java class: LumoUtility.MaxHeight
Preview | CSS class name / Java constant |
N/A |
|
N/A |
|
Min Height
Java class: LumoUtility.MinHeight
Preview | CSS class name / Java constant |
N/A |
|
Full |
|
Screen(scroll to see total height) |
|
Width
Java class: LumoUtility.Width
Preview | CSS class name / Java constant |
XS |
|
S |
|
M |
|
L |
|
XL |
|
Auto |
|
Full |
|
Max Width
Java class: LumoUtility.MaxWidth
Preview | CSS class name / Java constant |
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
Spacing
Classes for applying margin and padding to individual elements, as well as spacing between elements in a layout.
Margin
Classes for setting the margin of an element.
Uniform
Java class: LumoUtility.Margin
Preview | CSS class name / Java constant |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Bottom
Java class: LumoUtility.Margin.Bottom
Preview | CSS class name / Java constant |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Left
Java class: LumoUtility.Margin.Left
Preview | CSS class name / Java constant |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Right
Java class: LumoUtility.Margin.Right
Preview | CSS class name / Java constant |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Top
Java class: LumoUtility.Margin.Top
Preview | CSS class name / Java constant |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline End
Java class: LumoUtility.Margin.End
Preview | CSS class name / Java constant |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline Start
Java class: LumoUtility.Margin.Start
Preview | CSS class name / Java constant |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Padding
Classes for setting the padding of an element.
Uniform
Java class: LumoUtility.Padding
Preview | CSS class name / Java constant |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Bottom
Java class: LumoUtility.Padding.Bottom
Preview | CSS class name / Java constant |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Left
Java class: LumoUtility.Padding.Left
Preview | CSS class name / Java constant |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Right
Java class: LumoUtility.Padding.Right
Preview | CSS class name / Java constant |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Top
Java class: LumoUtility.Padding.Top
Preview | CSS class name / Java constant |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline End
Java class: LumoUtility.Padding.End
Preview | CSS class name / Java constant |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline Start
Java class: LumoUtility.Padding.Start
Preview | CSS class name / Java constant |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Typography
Classes for styling text.
Font Size
Classes for setting the font size of an element.
Java class: LumoUtility.FontSize
Preview | CSS class name / Java constant |
Lorem ipsum |
|
Lorem ipsum |
|
Lorem ipsum |
|
Lorem ipsum |
|
Lorem ipsum |
|
Lorem ipsum |
|
Lorem ipsum |
|
Lorem ipsum |
|
Font Weight
Classes for setting the font weight of an element.
Java class: LumoUtility.FontWeight
Preview | CSS class name / Java constant |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Line Height
Classes for setting the line height of an element.
Java class: LumoUtility.LineHeight
Preview | CSS class name / Java constant |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
List Style Type
Class for remove the default look of a list.
Java class: LumoUtility.ListStyleType
Preview | CSS class name / Java constant |
|
|
Text Alignment
Classes for setting an element’s text alignment.
Java class: LumoUtility.TextAlignment
Preview | CSS class name / Java constant |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Text Color
Classes for setting the text color of an element.
Java class: LumoUtility.TextColor
Preview | CSS class name / Java constant |
Header |
|
Body |
|
Secondary |
|
Tertiary |
|
Disabled |
|
Primary |
|
Primary contrast |
|
Error |
|
Error contrast |
|
Success |
|
Success contrast |
|
Text Overflow
Classes for setting text overflow.
Java class: LumoUtility.TextOverflow
Preview | CSS class name / Java constant |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Text Transform
Classes for transforming text.
Java class: LumoUtility.TextTransform
Preview | CSS class name / Java constant |
Lorem ipsum dolor sit amet |
|
Lorem ipsum dolor sit amet |
|
Lorem ipsum dolor sit amet |
|
Whitespace
Classes for transforming text.
Java class: LumoUtility.Whitespace
Preview | CSS class name / Java constant |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
111103A7-DD4A-430A-9D73-60668B6A849A