My Design System

My Design System

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. While the classes can be used with Vaadin’s web components they are primarily intended for creating layouts and styling text.

Caution
Work in progress
All utility classes are not yet documented.

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"]
}

Alternatively, if not using a custom theme folder, you can import the utility class module manually:

Flow Project

To add the utility classes manually on a Flow project, you need first load the JS module and then include it with a CSSImport annotation:

@JsModule('@vaadin/vaadin-lumo-styles/utility.js')
@CssImport(value="some-stylesheet.css", include="lumo-utility")

Fusion Project

On a Fusion project, you need to import the utility dependency into your view:

import '@vaadin/vaadin-lumo-styles/utility';

Classes

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

All utility classes are listed below.

Accessibility

Accessibility related classes.

Preview

Class

Screen reader only content

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

Backgrounds

Classes for applying a background color.

Base

Preview

Class

Base

.bg-base

Transparent

Preview

Class

Transparent

.bg-transparent

Contrast

Preview

Class

.bg-contrast-5

.bg-contrast-10

.bg-contrast-20

.bg-contrast-30

.bg-contrast-40

.bg-contrast-50

.bg-contrast-60

.bg-contrast-70

.bg-contrast-80

.bg-contrast-90

.bg-contrast

Primary

Preview

Class

.bg-primary-10

.bg-primary-50

.bg-primary

Error

Preview

Class

.bg-error-10

.bg-error-50

.bg-error

Success

Preview

Class

.bg-success-10

.bg-success-50

.bg-success

Borders

Border related classes.

Preview

Class

.border-0

.border

.border-b

.border-l

.border-r

.border-t

Border Color

Classes for setting the border color of an element.

Contrast

Preview

Class

.border-contrast-5

.border-contrast-10

.border-contrast-20

.border-contrast-30

.border-contrast-40

.border-contrast-50

.border-contrast-60

.border-contrast-70

.border-contrast-80

.border-contrast-90

.border-contrast

Primary

Preview

Class

.border-primary-10

.border-primary-50

.border-primary

Error

Preview

Class

.border-error-10

.border-error-50

.border-error

Success

Preview

Class

.border-success-10

.border-success-50

.border-success

Border Radius

Classes for setting the border radius of an element.

Preview

Class

.rounded-none

.rounded-s

.rounded-m

.rounded-l

Box Shadow

Classes for applying a box shadow.

Preview

Class

.shadow-xs

.shadow-s

.shadow-m

.shadow-l

.shadow-xl

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.

Preview

Class

1234

.content-center

1234

.content-end

1234

.content-start

1234

.content-around

1234

.content-between

1234

.content-evenly

1234

.content-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.

Preview

Class

123

.items-baseline

123

.items-center

123

.items-end

123

.items-start

123

.items-stretch

Align Self

Classes for overriding individual items align-item property. Applies to flexbox and grid items.

Preview

Class

123

.self-auto

123

.self-baseline

123

.self-center

123

.self-end

123

.self-start

123

.self-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.

Preview

Class

12

.justify-center

12

.justify-end

12

.justify-start

12

.justify-around

12

.justify-between

12

.justify-evenly

Flex

Classes for setting how items grow and shrink in a flexbox layout. Applies to flexbox items.

Preview

Class

1999

.flex-auto

1999

.flex-none

Flex Direction

Classes for setting the flex direction of a flexbox layout.

Preview

Class

123

.flex-col

123

.flex-col-reverse

123

.flex-row

123

.flex-row-reverse

Flex Grow

Classes for setting how items grow in a flexbox layout. Applies to flexbox items.

Preview

Class

1

.flex-grow-0

1

.flex-grow

Flex Shrink

Classes for setting how items shrink in a flexbox layout. Applies to flexbox items.

Preview

Class

56px

.flex-shrink-0

56px

.flex-shrink

Flex Wrap

Classes for setting how items wrap in a flexbox layout. Applies to flexbox layouts.

Preview

Class

1234

.flex-nowrap

1234

.flex-wrap

1234

.flex-wrap-reverse

Gap

Classes for defining the space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.

Uniform

Preview

Class

1234

.gap-xs

1234

.gap-s

1234

.gap-m

1234

.gap-l

1234

.gap-xl

Column

Classes for defining the horizontal space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.

Preview

Class

12

.gap-x-xs

12

.gap-x-s

12

.gap-x-m

12

.gap-x-l

12

.gap-x-xl

Row

Classes for defining the vertical space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.

Preview

Class

12

.gap-y-xs

12

.gap-y-s

12

.gap-y-m

12

.gap-y-l

12

.gap-y-xl

Grid Columns

Classes for setting the number of columns in a grid layout.

Preview

Class

1234

.grid-cols-1

1234

.grid-cols-2

1234

.grid-cols-3

1234

.grid-cols-4

12345678

.grid-cols-5

12345678

.grid-cols-6

12345678

.grid-cols-7

12345678

.grid-cols-8

123456789101112

.grid-cols-9

123456789101112

.grid-cols-10

123456789101112

.grid-cols-11

123456789101112

.grid-cols-12

Grid Rows

Classes for setting the number of rows in a grid layout.

Preview

Class

12345678

.grid-rows-1

12345678

.grid-rows-2

12345678

.grid-rows-3

12345678

.grid-rows-4

12345678

.grid-rows-5

12345678

.grid-rows-6

Spanning Columns

Classes for setting the column span of an item in a grid layout.

Preview

Class

123456789101112

.col-span-1

1234567891011121314151617181920212223

.col-span-2

12345678910111213141516171819202122

.col-span-3

123456789101112131415161718192021

.col-span-4

1234567891011121314151617181920

.col-span-5

12345678910111213141516171819

.col-span-6

123456789101112131415161718

.col-span-7

1234567891011121314151617

.col-span-8

12345678910111213141516

.col-span-9

123456789101112131415

.col-span-10

1234567891011121314

.col-span-11

12345678910111213

.col-span-12

Spanning Rows

Classes for setting the row span of an item in a grid layout.

Preview

Class

123456

.row-span-1

1234567891011

.row-span-2

12345678910

.row-span-3

123456789

.row-span-4

12345678

.row-span-5

1234567

.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.

Preview

Class

Size: 44px

.box-border

Size: 44px

.box-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.

Preview

Class

123

.block

123

.inline

123

.inline-block

123

.flex

123

.inline-flex

.hidden

123456789

.grid

123456789

.inline-grid

Overflow

Classes for setting the overflow behaviour of an element.

Preview

Class

123Scrolls

.overflow-auto

123No scroll

.overflow-hidden

123Scrolls

.overflow-scroll

Position

Classes for setting the position of an element.

Preview

Class

RelativeAbsolute

.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

N/A

.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

N/A

.relative

Sizing

Classes for setting height and width of an element.

Height

Preview

Class

N/A

.h-0

XS

.h-xs

S

.h-s

M

.h-m

L

.h-l

XL

.h-xl

Auto

.h-auto

Full

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

Screen(scroll to see total height)

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

Max Height

Preview

Class

N/A

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

N/A

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

Min Height

Preview

Class

N/A

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

Full

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

Screen(scroll to see total height)

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

Width

Preview

Class

XS

.w-xs

S

.w-s

M

.w-m

L

.w-l

XL

.w-xl

Auto

.w-auto

Full

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

Max Width

Preview

Class

N/A

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

N/A

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

N/A

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

N/A

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

N/A

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

N/A

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

Min Width

Preview

Class

N/A

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

Full

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

Icon Size

Preview

Class

.icon-s

.icon-m

.icon-l

Spacing

Classes for applying margin and padding on individual elements, as well as spacing between elements in a layout.

Margin

Classes for setting the margin of an element.

Uniform

Preview

Class

Auto

.m-auto

0

.m-0

XS

.m-xs

S

.m-s

M

.m-m

L

.m-l

XL

.m-xl

Bottom

Preview

Class

Auto

.mb-auto

0

.mb-0

XS

.mb-xs

S

.mb-s

M

.mb-m

L

.mb-l

XL

.mb-xl

Left

Preview

Class

Auto

.ml-auto

0

.ml-0

XS

.ml-xs

S

.ml-s

M

.ml-m

L

.ml-l

XL

.ml-xl

Preview

Class

Auto

.mr-auto

0

.mr-0

XS

.mr-xs

S

.mr-s

M

.mr-m

L

.mr-l

XL

.mr-xl

Top

Preview

Class

Auto

.mt-auto

0

.mt-0

XS

.mt-xs

S

.mt-s

M

.mt-m

L

.mt-l

XL

.mt-xl

Inline End

Preview

Class

Auto

.me-auto

0

.me-0

XS

.me-xs

S

.me-s

M

.me-m

L

.me-l

XL

.me-xl

Inline Start

Preview

Class

Auto

.ms-auto

0

.ms-0

XS

.ms-xs

S

.ms-s

M

.ms-m

L

.ms-l

XL

.ms-xl

Horizontal

Preview

Class

Auto

.mx-auto

0

.mx-0

XS

.mx-xs

S

.mx-s

M

.mx-m

L

.mx-l

XL

.mx-xl

Vertical

Preview

Class

Auto

.my-auto

0

.my-0

XS

.my-xs

S

.my-s

M

.my-m

L

.my-l

XL

.my-xl

Padding

Classes for setting the padding of an element.

Uniform

Preview

Class

0

.p-0

XS

.p-xs

S

.p-s

M

.p-m

L

.p-l

XL

.p-xl

Bottom

Preview

Class

0

.pb-0

XS

.pb-xs

S

.pb-s

M

.pb-m

L

.pb-l

XL

.pb-xl

Left

Preview

Class

0

.pl-0

XS

.pl-xs

S

.pl-s

M

.pl-m

L

.pl-l

XL

.pl-xl

Right

Preview

Class

0

.pr-0

XS

.pr-xs

S

.pr-s

M

.pr-m

L

.pr-l

XL

.pr-xl

Top

Preview

Class

0

.pt-0

XS

.pt-xs

S

.pt-s

M

.pt-m

L

.pt-l

XL

.pt-xl

Inline End

Preview

Class

0

.pe-0

XS

.pe-xs

S

.pe-s

M

.pe-m

L

.pe-l

XL

.pe-xl

Inline Start

Preview

Class

0

.ps-0

XS

.ps-xs

S

.ps-s

M

.ps-m

L

.ps-l

XL

.ps-xl

Horizontal

Preview

Class

0

.px-0

XS

.px-xs

S

.px-s

M

.px-m

L

.px-l

XL

.px-xl

Vertical

Preview

Class

0

.py-0

XS

.py-xs

S

.py-s

M

.py-m

L

.py-l

XL

.py-xl

Typography

Classes for styling text.

Font Size

Classes for setting the font size of an element.

Preview

Class

Lorem ipsum

.text-2xs

Lorem ipsum

.text-xs

Lorem ipsum

.text-s

Lorem ipsum

.text-m

Lorem ipsum

.text-l

Lorem ipsum

.text-xl

Lorem ipsum

.text-2xl

Lorem ipsum

.text-3xl

Font Weight

Classes for setting the font weight of an element.

Preview

Class

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

.font-thin

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

.font-extralight

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

.font-light

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

.font-normal

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

.font-medium

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

.font-semibold

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

.font-bold

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

.font-extrabold

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

.font-black

Line Height

Classes for setting the line height of an element.

Preview

Class

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

.leading-none

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

.leading-xs

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

.leading-s

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

.leading-m

List Style Type

Class for remove the default look of a list.

Preview

Class

  • Item 1
  • Item 2
  • Item 3

.list-none

Text Alignment

Classes for setting an element’s text alignment.

Preview

Class

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

.text-left

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

.text-center

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

.text-right

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

.text-justify

Text Color

Classes for setting the text color of an element.

Preview

Class

Header

.text-header

Body

.text-body

Secondary

.text-secondary

Tertiary

.text-tertiary

Disabled

.text-disabled

Primary

.text-primary

Primary contrast

.text-primary-contrast

Error

.text-error

Error contrast

.text-error-contrast

Success

.text-success

Success contrast

.text-success-contrast

Text Overflow

Classes for setting text overflow.

Preview

Class

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

.overflow-clip

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

.overflow-ellipsis

Text Transform

Classes for transforming text.

Preview

Class

Lorem ipsum dolor sit amet

.capitalize

Lorem ipsum dolor sit amet

.lowercase

Lorem ipsum dolor sit amet

.uppercase

Whitespace

Classes for transforming text.

Preview

Class

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

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

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

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

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