Docs

Docs

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

Open in a
new tab
// Import all Lumo CSS custom properties into the global style scope
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/utility.js';
// prettier-ignore

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

.sr-only / SCREEN_READER_ONLY
Hides content visually while remaining available to screen readers

Backgrounds

Classes for applying a background color.
Java class: LumoUtility.Background

Base

Preview

HTML / Java

Base

.bg-base / BASE

Transparent

Preview

HTML / Java

Transparent

.bg-transparent / TRANSPARENT

Contrast

Preview

HTML / Java

.bg-contrast-5 / CONTRAST_5

.bg-contrast-10 / CONTRAST_10

.bg-contrast-20 / CONTRAST_20

.bg-contrast-30 / CONTRAST_30

.bg-contrast-40 / CONTRAST_40

.bg-contrast-50 / CONTRAST_50

.bg-contrast-60 / CONTRAST_60

.bg-contrast-70 / CONTRAST_70

.bg-contrast-80 / CONTRAST_80

.bg-contrast-90 / CONTRAST_90

.bg-contrast / CONTRAST

Primary

Preview

HTML / Java

.bg-primary-10 / PRIMARY_10

.bg-primary-50 / PRIMARY_50

.bg-primary / PRIMARY

Error

Preview

HTML / Java

.bg-error-10 / ERROR_10

.bg-error-50 / ERROR_50

.bg-error / ERROR

Success

Preview

HTML / Java

.bg-success-10 / SUCCESS_10

.bg-success-50 / SUCCESS_50

.bg-success / SUCCESS

Borders

Border related classes.
Java class: LumoUtility.Border

Preview

HTML / Java

.border-0 / NONE

.border / ALL

.border-b / BOTTOM

.border-l / LEFT

.border-r / RIGHT

.border-t / TOP

Border Color

Classes for setting the border color of an element.
Java class: LumoUtility.BorderColor

Contrast

Preview

HTML / Java

.border-contrast-5 / CONTRAST_5

.border-contrast-10 / CONTRAST_10

.border-contrast-20 / CONTRAST_20

.border-contrast-30 / CONTRAST_30

.border-contrast-40 / CONTRAST_40

.border-contrast-50 / CONTRAST_50

.border-contrast-60 / CONTRAST_60

.border-contrast-70 / CONTRAST_70

.border-contrast-80 / CONTRAST_80

.border-contrast-90 / CONTRAST_90

.border-contrast / CONTRAST

Primary

Preview

HTML / Java

.border-primary-10 / PRIMARY_10

.border-primary-50 / PRIMARY_50

.border-primary / PRIMARY

Error

Preview

HTML / Java

.border-error-10 / ERROR_10

.border-error-50 / ERROR_50

.border-error / ERROR

Success

Preview

HTML / Java

.border-success-10 / SUCCESS_10

.border-success-50 / SUCCESS_50

.border-success / SUCCESS

Border Radius

Classes for setting the border radius of an element.
Java class: LumoUtility.BorderRadius

Preview

HTML / Java

.rounded-none / NONE

.rounded-s / SMALL

.rounded-m / MEDIUM

.rounded-l / LARGE

Box Shadow

Classes for applying a box shadow.
Java class: LumoUtility.BoxShadow

Preview

HTML / Java

.shadow-xs / XSMALL

.shadow-s / SMALL

.shadow-m / MEDIUM

.shadow-l / LARGE

.shadow-xl / XLARGE

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

.content-center / CENTER

1234

.content-end / END

1234

.content-start / START

1234

.content-around / AROUND

1234

.content-between / BETWEEN

1234

.content-evenly / EVENLY

1234

.content-stretch / STRETCH

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

.items-baseline / BASELINE

123

.items-center / CENTER

123

.items-end / END

123

.items-start / START

123

.items-stretch / STRETCH

Align Self

Classes for overriding individual items align-item property. Applies to flexbox and grid items.
Java class: LumoUtility.AlignSelf

Preview

HTML / Java

123

.self-auto / AUTO

123

.self-baseline / BASELINE

123

.self-center / CENTER

123

.self-end / END

123

.self-start / START

123

.self-stretch / STRETCH

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

.justify-center / CENTER

12

.justify-end / END

12

.justify-start / START

12

.justify-around / AROUND

12

.justify-between / BETWEEN

12

.justify-evenly / EVENLY

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

.flex-auto / AUTO

1999

.flex-none / NONE

Flex Direction

Classes for setting the flex direction of a flexbox layout.
Java class: LumoUtility.FlexDirection

Preview

HTML / Java

123

.flex-col / COLUMN

123

.flex-col-reverse / COLUMN_REVERSE

123

.flex-row / ROW

123

.flex-row-reverse / ROW_REVERSE

Flex Grow

Classes for setting how items grow in a flexbox layout. Applies to flexbox items.
Java class: LumoUtility.Flex

Preview

HTML / Java

1

.flex-grow-0 / GROW_NONE

1

.flex-grow / GROW

Flex Shrink

Classes for setting how items shrink in a flexbox layout. Applies to flexbox items.
Java class: LumoUtility.Flex

Preview

HTML / Java

56px

.flex-shrink-0 / SHRINK_NONE

56px

.flex-shrink / SHRINK

Flex Wrap

Classes for setting how items wrap in a flexbox layout. Applies to flexbox layouts.
Java class: LumoUtility.JustifyContent

Preview

HTML / Java

1234

.flex-nowrap / NOWRAP

1234

.flex-wrap / WRAP

1234

.flex-wrap-reverse / WRAP_REVERSE

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

.gap-xs / XSMALL

1234

.gap-s / SMALL

1234

.gap-m / MEDIUM

1234

.gap-l / LARGE

1234

.gap-xl / XLARGE

Column

Classes for defining the horizontal space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.
Java class: LumoUtility.Gap.Column

Preview

HTML / Java

12

.gap-x-xs / XSMALL

12

.gap-x-s / SMALL

12

.gap-x-m / MEDIUM

12

.gap-x-l / LARGE

12

.gap-x-xl / XLARGE

Row

Classes for defining the vertical space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.
Java class: LumoUtility.Gap.Row

Preview

HTML / Java

12

.gap-y-xs / XSMALL

12

.gap-y-s / SMALL

12

.gap-y-m / MEDIUM

12

.gap-y-l / LARGE

12

.gap-y-xl / XLARGE

Grid Columns

Classes for setting the number of columns in a grid layout.
Java class: LumoUtility.Grid.Column

Preview

HTML / Java

1234

.grid-cols-1 / COLUMNS_1

1234

.grid-cols-2 / COLUMNS_2

1234

.grid-cols-3 / COLUMNS_3

1234

.grid-cols-4 / COLUMNS_4

12345678

.grid-cols-5 / COLUMNS_5

12345678

.grid-cols-6 / COLUMNS_6

12345678

.grid-cols-7 / COLUMNS_7

12345678

.grid-cols-8 / COLUMNS_8

123456789101112

.grid-cols-9 / COLUMNS_9

123456789101112

.grid-cols-10 / COLUMNS_10

123456789101112

.grid-cols-11 / COLUMNS_11

123456789101112

.grid-cols-12 / COLUMNS_12

Grid Rows

Classes for setting the number of rows in a grid layout.
Java class: LumoUtility.Grid.Row

Preview

HTML / Java

12345678

.grid-rows-1 / ROWS_1

12345678

.grid-rows-2 / ROWS_2

12345678

.grid-rows-3 / ROWS_3

12345678

.grid-rows-4 / ROWS_4

12345678

.grid-rows-5 / ROWS_5

12345678

.grid-rows-6 / ROWS_6

Spanning Columns

Classes for setting the column span of an item in a grid layout. Java class: LumoUtility.Grid.Column

Preview

HTML / Java

123456789101112

.col-span-1 / COLUMN_SPAN_1

1234567891011121314151617181920212223

.col-span-2 / COLUMN_SPAN_2

12345678910111213141516171819202122

.col-span-3 / COLUMN_SPAN_3

123456789101112131415161718192021

.col-span-4 / COLUMN_SPAN_4

1234567891011121314151617181920

.col-span-5 / COLUMN_SPAN_5

12345678910111213141516171819

.col-span-6 / COLUMN_SPAN_6

123456789101112131415161718

.col-span-7 / COLUMN_SPAN_7

1234567891011121314151617

.col-span-8 / COLUMN_SPAN_8

12345678910111213141516

.col-span-9 / COLUMN_SPAN_9

123456789101112131415

.col-span-10 / COLUMN_SPAN_10

1234567891011121314

.col-span-11 / COLUMN_SPAN_11

12345678910111213

.col-span-12 / COLUMN_SPAN_12

Spanning Rows

Classes for setting the row span of an item in a grid layout.
Java class: LumoUtility.Grid.Row

Preview

HTML / Java

123456

.row-span-1 / ROW_SPAN_1

1234567891011

.row-span-2 / ROW_SPAN_2

12345678910

.row-span-3 / ROW_SPAN_3

123456789

.row-span-4 / ROW_SPAN_4

12345678

.row-span-5 / ROW_SPAN_5

1234567

.row-span-6 / ROW_SPAN_6

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

.box-border / BORDER

Size: 44px

.box-content / CONTENT

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

.block / BLOCK

123

.inline / INLINE

123

.inline-block / INLINE_BLOCK

123

.flex / FLEX

123

.inline-flex / INLINE_FLEX

.hidden / HIDDEN

123456789

.grid / GRID

123456789

.inline-grid / INLINE_GRID

Overflow

Classes for setting the overflow behavior of an element.
Java class: LumoUtility.Overflow

Preview

HTML / Java

123Scrolls

.overflow-auto / AUTO

123No scroll

.overflow-hidden / HIDDEN

123Scrolls

.overflow-scroll / SCROLL

Position

Classes for setting the position of an element.
Java class: LumoUtility.Position

Preview

HTML / Java

RelativeAbsolute

.absolute / ABSOLUTE

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.

.fixed / FIXED

N/A

.static / STATIC

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.

.sticky / STICKY

N/A

.relative / RELATIVE

Sizing

Classes for setting the height and width of an element.

Height

Java class: LumoUtility.Height

Preview

HTML / Java

N/A

.h-0 / NONE

XS

.h-xs / XSMALL

S

.h-s / SMALL

M

.h-m / MEDIUM

L

.h-l / LARGE

XL

.h-xl / XLARGE

Auto

.h-auto / AUTO

Full

.h-full / FULL
Sets the height of an element to 100% of its parent’s height

Screen(scroll to see total height)

.h-screen / SCREEN
Sets the height of an element to 100% of the viewport height

Max Height

Java class: LumoUtility.MaxHeight

Preview

HTML / Java

N/A

.max-h-full / FULL
Sets the maximum height of an element to 100% of its parent’s height

N/A

.max-h-screen / SCREEN
Sets the maximum height of an element to 100% of the viewport height

Min Height

Java class: LumoUtility.MinHeight

Preview

HTML / Java

N/A

.min-h-0 / NONE
Sets the minimum height of an element to 0

Full

.min-h-full / FULL
Sets the minimum height of an element to 100% of its parent’s height

Screen(scroll to see total height)

.min-h-screen / SCREEN
Sets the minimum height of an element to 100% of the viewport height

Width

Java class: LumoUtility.Width

Preview

HTML / Java

XS

.w-xs / XSMALL

S

.w-s / SMALL

M

.w-m / MEDIUM

L

.w-l / LARGE

XL

.w-xl / XLARGE

Auto

.w-auto / AUTO

Full

.w-full / FULL
Sets the width of an element to 100% of its parent’s width

Max Width

Java class: LumoUtility.MaxWidth

Preview

HTML / Java

N/A

.max-w-full / FULL
Sets the maximum width of an element to 100% of its parent’s width

N/A

.max-w-screen-sm / SCREEN_SMALL
Sets the maximum width of an element to 640px

N/A

.max-w-screen-md / SCREEN_MEDIUM
Sets the maximum width of an element to 768px

N/A

.max-w-screen-lg / SCREEN_LARGE
Sets the maximum width of an element to 1024px

N/A

.max-w-screen-xl / SCREEN_XLARGE
Sets the maximum width of an element to 1280px

N/A

.max-w-screen-2xl / SCREEN_XXLARGE
Sets the maximum width of an element to 1536px

Min Width

Java class: LumoUtility.MinWidth

Preview

HTML / Java

N/A

.min-w-0 / NONE
Sets the minimum width of an element to 0

Full

.min-w-full / FULL
Sets the minimum width of an element to 100% of its parent’s width

Icon Size

Java class: LumoUtility.IconSize

Preview

HTML / Java

.icon-s / SMALL

.icon-m / MEDIUM

.icon-l / LARGE

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

.m-auto / AUTO

0

.m-0 / NONE

XS

.m-xs / XSMALL

S

.m-s / SMALL

M

.m-m / MEDIUM

L

.m-l / LARGE

XL

.m-xl / XLARGE

Bottom

Java class: LumoUtility.Margin.Bottom

Preview

HTML / Java

Auto

.mb-auto / AUTO

0

.mb-0 / NONE

XS

.mb-xs / XSMALL

S

.mb-s / SMALL

M

.mb-m / MEDIUM

L

.mb-l / LARGE

XL

.mb-xl / XLARGE

Left

Java class: LumoUtility.Margin.Left

Preview

HTML / Java

Auto

.ml-auto / AUTO

0

.ml-0 / NONE

XS

.ml-xs / XSMALL

S

.ml-s / SMALL

M

.ml-m / MEDIUM

L

.ml-l / LARGE

XL

.ml-xl / XLARGE

Java class: LumoUtility.Margin.Right

Preview

HTML / Java

Auto

.mr-auto / AUTO

0

.mr-0 / NONE

XS

.mr-xs / XSMALL

S

.mr-s / SMALL

M

.mr-m / MEDIUM

L

.mr-l / LARGE

XL

.mr-xl / XLARGE

Top

Java class: LumoUtility.Margin.Top

Preview

HTML / Java

Auto

.mt-auto / AUTO

0

.mt-0 / NONE

XS

.mt-xs / XSMALL

S

.mt-s / SMALL

M

.mt-m / MEDIUM

L

.mt-l / LARGE

XL

.mt-xl / XLARGE

Inline End

Java class: LumoUtility.Margin.End

Preview

HTML / Java

Auto

.me-auto / AUTO

0

.me-0 / NONE

XS

.me-xs / XSMALL

S

.me-s / SMALL

M

.me-m / MEDIUM

L

.me-l / LARGE

XL

.me-xl / XLARGE

Inline Start

Java class: LumoUtility.Margin.Start

Preview

HTML / Java

Auto

.ms-auto / AUTO

0

.ms-0 / NONE

XS

.ms-xs / XSMALL

S

.ms-s / SMALL

M

.ms-m / MEDIUM

L

.ms-l / LARGE

XL

.ms-xl / XLARGE

Horizontal

Java class: LumoUtility.Margin.Horizontal

Preview

HTML / Java

Auto

.mx-auto / AUTO

0

.mx-0 / NONE

XS

.mx-xs / XSMALL

S

.mx-s / SMALL

M

.mx-m / MEDIUM

L

.mx-l / LARGE

XL

.mx-xl / XLARGE

Vertical

Java class: LumoUtility.Margin.Vertical

Preview

HTML / Java

Auto

.my-auto / AUTO

0

.my-0 / NONE

XS

.my-xs / XSMALL

S

.my-s / SMALL

M

.my-m / MEDIUM

L

.my-l / LARGE

XL

.my-xl / XLARGE

Padding

Classes for setting the padding of an element.

Uniform

Java class: LumoUtility.Padding

Preview

HTML / Java

0

.p-0 / NONE

XS

.p-xs / XSMALL

S

.p-s / SMALL

M

.p-m / MEDIUM

L

.p-l / LARGE

XL

.p-xl / XLARGE

Bottom

Java class: LumoUtility.Padding.Bottom

Preview

HTML / Java

0

.pb-0 / NONE

XS

.pb-xs / XSMALL

S

.pb-s / SMALL

M

.pb-m / MEDIUM

L

.pb-l / LARGE

XL

.pb-xl / XLARGE

Left

Java class: LumoUtility.Padding.Left

Preview

HTML / Java

0

.pl-0 / NONE

XS

.pl-xs / XSMALL

S

.pl-s / SMALL

M

.pl-m / MEDIUM

L

.pl-l / LARGE

XL

.pl-xl / XLARGE

Right

Java class: LumoUtility.Padding.Right

Preview

HTML / Java

0

.pr-0 / NONE

XS

.pr-xs / XSMALL

S

.pr-s / SMALL

M

.pr-m / MEDIUM

L

.pr-l / LARGE

XL

.pr-xl / XLARGE

Top

Java class: LumoUtility.Padding.Top

Preview

HTML / Java

0

.pt-0 / NONE

XS

.pt-xs / XSMALL

S

.pt-s / SMALL

M

.pt-m / MEDIUM

L

.pt-l / LARGE

XL

.pt-xl / XLARGE

Inline End

Java class: LumoUtility.Padding.End

Preview

HTML / Java

0

.pe-0 / NONE

XS

.pe-xs / XSMALL

S

.pe-s / SMALL

M

.pe-m / MEDIUM

L

.pe-l / LARGE

XL

.pe-xl / XLARGE

Inline Start

Java class: LumoUtility.Padding.Start

Preview

HTML / Java

0

.ps-0 / NONE

XS

.ps-xs / XSMALL

S

.ps-s / SMALL

M

.ps-m / MEDIUM

L

.ps-l / LARGE

XL

.ps-xl / XLARGE

Horizontal

Java class: LumoUtility.Padding.Horizontal

Preview

HTML / Java

0

.px-0 / NONE

XS

.px-xs / XSMALL

S

.px-s / SMALL

M

.px-m / MEDIUM

L

.px-l / LARGE

XL

.px-xl / XLARGE

Vertical

Java class: LumoUtility.Padding.Vertical

Preview

HTML / Java

0

.py-0 / NONE

XS

.py-xs / XSMALL

S

.py-s / SMALL

M

.py-m / MEDIUM

L

.py-l / LARGE

XL

.py-xl / XLARGE

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

.text-2xs / XXSMALL

Lorem ipsum

.text-xs / XSMALL

Lorem ipsum

.text-s / SMALL

Lorem ipsum

.text-m / MEDIUM

Lorem ipsum

.text-l / LARGE

Lorem ipsum

.text-xl / XLARGE

Lorem ipsum

.text-2xl / XXLARGE

Lorem ipsum

.text-3xl / XXXLARGE

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.

.font-thin / THIN

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-extralight / EXTRALIGHT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-light / LIGHT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-normal / NORMAL

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-medium / MEDIUM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-semibold / SEMIBOLD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-bold / BOLD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-extrabold / EXTRABOLD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-black / BLACK

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.

.leading-none / NONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.leading-xs / XSMALL

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.leading-s / SMALL

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.leading-m / MEDIUM

List Style Type

Class for remove the default look of a list.
Java class: LumoUtility.ListStyleType

Preview

HTML / Java

  • Item 1
  • Item 2
  • Item 3

.list-none / NONE

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.

.text-left / LEFT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-center / CENTER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-right / RIGHT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-justify / JUSTIFY

Text Color

Classes for setting the text color of an element.
Java class: LumoUtility.TextColor

Preview

HTML / Java

Header

.text-header / HEADER

Body

.text-body / BODY

Secondary

.text-secondary / SECONDARY

Tertiary

.text-tertiary / TERTIARY

Disabled

.text-disabled / DISABLED

Primary

.text-primary / PRIMARY

Primary contrast

.text-primary-contrast / PRIMARY_CONTRAST

Error

.text-error / ERROR

Error contrast

.text-error-contrast / ERROR_CONTRAST

Success

.text-success / SUCCESS

Success contrast

.text-success-contrast / 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.

.overflow-clip / CLIP

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.overflow-ellipsis / ELLIPSIS

Text Transform

Classes for transforming text.
Java class: LumoUtility.TextTransform

Preview

HTML / Java

Lorem ipsum dolor sit amet

.capitalize / CAPITALIZE

Lorem ipsum dolor sit amet

.lowercase / LOWERCASE

Lorem ipsum dolor sit amet

.uppercase / UPPERCASE

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.

.whitespace-normal / NORMAL

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.

.whitespace-nowrap / NOWRAP

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.

.whitespace-pre / PRE

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.

.whitespace-pre-line / PRE_LINE

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.

.whitespace-pre-wrap / PRE_WRAP