> Markdown version of [Utility Classes](https://vaadin.com/docs/v23/styling/lumo/utility-classes). Section index: [llms.txt](https://vaadin.com/docs/v23/styling/llms.txt) # 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](https://vaadin.com/docs/v23/styling/custom-theme/custom-theme-configuration.md) `theme.json` file. `frontend/themes/myapp/theme.json` ```json { "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: `MainView.java` ```java @JsModule("@vaadin/vaadin-lumo-styles/utility.js") @CssImport(value="some-stylesheet.css", include="lumo-utility") ``` ### 2. Use the Classes example-view\.ts **TypeScript** ```typescript return html`

View Name

`; ``` ExampleView\.java **Java** ```java Header header = new Header(); header.addClassNames( LumoUtility.Display.FLEX, LumoUtility.Height.XLARGE, LumoUtility.AlignItems.CENTER, LumoUtility.Padding.Horizontal.LARGE ); H1 viewName = new H1("View Name"); viewName.addClassNames( LumoUtility.Margin.Vertical.NONE, LumoUtility.Margin.End.AUTO, LumoUtility.FontSize.LARGE ); header.add(appName); ``` > **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](https://vaadin.com/docs/v23/integrations/embedding.md) Flow UIs, the Utility Classes do not work in them yet. See for details. ## Classes `lumo-tokens.ts` ```typescript // Import all Lumo CSS custom properties into the global style scope // tag::color[] import '@vaadin/vaadin-lumo-styles/color.js'; // end::color[] // tag::typography[] import '@vaadin/vaadin-lumo-styles/typography.js'; // end::typography[] // tag::size[] import '@vaadin/vaadin-lumo-styles/sizing.js'; // end::size[] // tag::space[] import '@vaadin/vaadin-lumo-styles/spacing.js'; // end::space[] // tag::style[] import '@vaadin/vaadin-lumo-styles/style.js'; // end::style[] // tag::utility-classes[] import '@vaadin/vaadin-lumo-styles/utility.js'; // end::utility-classes[] // 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | Base | **`bg-base` / `BASE`** | #### Transparent | | | | ----------- | ------------------------------------ | | Preview | CSS class name / Java constant | | Transparent | **`bg-transparent` / `TRANSPARENT`** | #### Contrast | | | | ------- | ------------------------------------ | | Preview | CSS class name / Java constant | | | **`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 | CSS class name / Java constant | | | **`bg-primary-10` / `PRIMARY_10`** | | | **`bg-primary-50` / `PRIMARY_50`** | | | **`bg-primary` / `PRIMARY`** | #### Error | | | | ------- | ------------------------------ | | Preview | CSS class name / Java constant | | | **`bg-error-10` / `ERROR_10`** | | | **`bg-error-50` / `ERROR_50`** | | | **`bg-error` / `ERROR`** | #### Success | | | | ------- | ---------------------------------- | | Preview | CSS class name / Java constant | | | **`bg-success-10` / `SUCCESS_10`** | | | **`bg-success-50` / `SUCCESS_50`** | | | **`bg-success` / `SUCCESS`** | ### Borders Border related classes.\ Java class: `LumoUtility.Border` | | | | ------- | ------------------------------ | | Preview | CSS class name / Java constant | | | **`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 | CSS class name / Java constant | | | **`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 | CSS class name / Java constant | | | **`border-primary-10` / `PRIMARY_10`** | | | **`border-primary-50` / `PRIMARY_50`** | | | **`border-primary` / `PRIMARY`** | ##### Error | | | | ------- | ---------------------------------- | | Preview | CSS class name / Java constant | | | **`border-error-10` / `ERROR_10`** | | | **`border-error-50` / `ERROR_50`** | | | **`border-error` / `ERROR`** | ##### Success | | | | ------- | -------------------------------------- | | Preview | CSS class name / Java constant | | | **`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 | CSS class name / Java constant | | | **`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 | CSS class name / Java constant | | | **`shadow-xs` / `XSMALL`** | | | **`shadow-s` / `SMALL`** | | | **`shadow-m` / `MEDIUM`** | | | **`shadow-l` / `LARGE`** | | | **`shadow-xl` / `XLARGE`** | ### Flexbox & Grid Classes for flexbox and grid layouts. > **Note: Remember to set display** > > The following classes require setting either the `flex` or `grid` CSS class on the element to work. See [Display classes](#display). #### 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 | **`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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 123 | **`block` / `BLOCK`** | | 123 | **`inline` / `INLINE`** | | 123 | **`inline-block` / `INLINE_BLOCK`** | | 123 | **`flex` / `FLEX`** | | 123 | **`inline-flex` / `INLINE_FLEX`** | | 123 | **`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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | | **`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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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`** | ##### Right Java class: `LumoUtility.Margin.Right` | | | | ------- | ------------------------------ | | Preview | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | • Item 1 • Item 2 • Item 3 | **`list-none` / `NONE`** | #### 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. | **`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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | CSS class name / Java constant | | 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 | 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. | **`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`** | `111103A7-DD4A-430A-9D73-60668B6A849A`