Utility Classes
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
To use the classes, make sure that "utility"
is added to the "lumoImports"
entry in your application theme’s configuration theme.json
.
{
"lumoImports": ["...", "utility"]
}
If you are not 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")
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 | HTML / Java |
Screen reader only content |
|
Backgrounds
Classes for applying a background color.
Java class: LumoUtility.Background
Contrast
Preview | HTML / Java |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
Borders
Border related classes.
Java class: LumoUtility.Border
Preview | HTML / Java |
| |
| |
| |
| |
| |
|
Border Color
Classes for setting the border color of an element.
Java class: LumoUtility.BorderColor
Contrast
Preview | HTML / Java |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
Box Shadow
Classes for applying a box shadow.
Java class: LumoUtility.BoxShadow
Preview | HTML / Java |
| |
| |
| |
| |
|
Flexbox & Grid
Classes for flexbox and grid layouts.
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
1999 |
|
1999 |
|
Flex Direction
Classes for setting the flex direction of a flexbox layout.
Java class: LumoUtility.FlexDirection
Preview | HTML / Java |
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 | HTML / Java |
1 |
|
1 |
|
Flex Shrink
Classes for setting how items shrink in a flexbox layout.
Applies to flexbox items.
Java class: LumoUtility.Flex
Preview | HTML / Java |
56px |
|
56px |
|
Flex Wrap
Classes for setting how items wrap in a flexbox layout.
Applies to flexbox layouts.
Java class: LumoUtility.JustifyContent
Preview | HTML / Java |
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 | HTML / Java |
1234 |
|
1234 |
|
1234 |
|
1234 |
|
1234 |
|
Grid Columns
Classes for setting the number of columns in a grid layout.
Java class: LumoUtility.Grid.Column
Preview | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
123 |
|
123 |
|
123 |
|
123 |
|
123 |
|
| |
123456789 |
|
123456789 |
|
Overflow
Classes for setting the overflow behavior of an element.
Java class: LumoUtility.Overflow
Preview | HTML / Java |
123Scrolls |
|
123No scroll |
|
123Scrolls |
|
Position
Classes for setting the position of an element.
Java class: LumoUtility.Position
Preview | HTML / Java |
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 | HTML / Java |
N/A |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Auto |
|
Full |
|
Screen(scroll to see total height) |
|
Max Height
Java class: LumoUtility.MaxHeight
Preview | HTML / Java |
N/A |
|
N/A |
|
Min Height
Java class: LumoUtility.MinHeight
Preview | HTML / Java |
N/A |
|
Full |
|
Screen(scroll to see total height) |
|
Width
Java class: LumoUtility.Width
Preview | HTML / Java |
XS |
|
S |
|
M |
|
L |
|
XL |
|
Auto |
|
Full |
|
Max Width
Java class: LumoUtility.MaxWidth
Preview | HTML / Java |
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 | HTML / Java |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Bottom
Java class: LumoUtility.Margin.Bottom
Preview | HTML / Java |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Left
Java class: LumoUtility.Margin.Left
Preview | HTML / Java |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Right
Java class: LumoUtility.Margin.Right
Preview | HTML / Java |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Top
Java class: LumoUtility.Margin.Top
Preview | HTML / Java |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline End
Java class: LumoUtility.Margin.End
Preview | HTML / Java |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline Start
Java class: LumoUtility.Margin.Start
Preview | HTML / Java |
Auto |
|
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Padding
Classes for setting the padding of an element.
Uniform
Java class: LumoUtility.Padding
Preview | HTML / Java |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Bottom
Java class: LumoUtility.Padding.Bottom
Preview | HTML / Java |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Left
Java class: LumoUtility.Padding.Left
Preview | HTML / Java |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Right
Java class: LumoUtility.Padding.Right
Preview | HTML / Java |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Top
Java class: LumoUtility.Padding.Top
Preview | HTML / Java |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline End
Java class: LumoUtility.Padding.End
Preview | HTML / Java |
0 |
|
XS |
|
S |
|
M |
|
L |
|
XL |
|
Inline Start
Java class: LumoUtility.Padding.Start
Preview | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
|
|
Text Alignment
Classes for setting an element’s text alignment.
Java class: LumoUtility.TextAlignment
Preview | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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 | HTML / Java |
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. |
|