Style Guide

Lumos | v2.2.1

Typography

Text Styles

u-text-style-display

Heading

u-text-style-h1

Heading

u-text-style-h2

Heading

u-text-style-h3

Heading

u-text-style-h4

Heading

u-text-style-h5

Heading

u-text-style-h6

Heading

u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-link

Link text here

u-text-style-button

Link text here

Weights

u-weight-regular

Lorem ipsum dolor

u-weight-medium

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Line Height

u-line-height-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-huge

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Letter Spacing

u-letter-spacing-tight

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-letter-spacing-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-letter-spacing-wide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Line Clamp

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

u-line-clamp-3

u-line-clamp-4

Alignment

u-alignment-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Transform

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Wrap

u-text-wrap-default

Normal text wrapping. Useful for resetting text wrapping on a child if the parent has balance or pretty.

u-text-wrap-balance

Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.

u-text-wrap-pretty

Ensures there's more than one word on the last line of text. Ideal for long form content.

u-break-word

longwrod

u-break-word-hyphen

longwrod

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

‍

u-rich-text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Figure

Ordered List

Ordered list
when not inside
of rich text

Ordered list
when inside
of rich text

Unordered List

Unordered list
when not inside
of rich text

Unordered list
when inside
of rich text

Block Quotes

Block quote when not inside of a rich text element

Block quote when inside of a rich text element

Color

Themes

u-theme-light

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-theme-dark

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-theme-brand

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-theme-inherit

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Color

u-color-inherit

Lorem ipsum dolor

u-color-primary

Lorem ipsum dolor

u-color-secondary

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

u-color-accent

Lorem ipsum dolor

Background Colors

u-background-primary

u-background-secondary

u-background-transparent

u-background-skeleton

Border Colors

u-border-color-primary

u-border-color-secondary

u-border-color-transparent

Icon Colors

u-icon-color-primary

Flexbox

Flex Utilities

u-flex-horizontal-wrap

u-flex-vertical-nowrap

u-flex-horizontal-nowrap

u-flex-vertical-wrap

Align Self Utilities

u-align-self-inherit

u-align-self-auto

u-align-self-start

u-align-self-center

u-align-self-end

u-align-self-stretch

Align Items Utilities

u-align-items-inherit

u-align-items-start

u-align-items-center

u-align-items-end

u-align-items-stretch

Justify Content Utilities

u-justify-content-inherit

u-justify-content-start

u-justify-content-center

u-justify-content-end

u-justify-content-between

u-justify-content-around

Flex Basis Utilities

u-flex-shrink

u-flex-grow

u-flex-noshrink

Flex Basis Utilities

u-flex-direction-row

u-flex-direction-column

u-flex-direction-row-medium

u-flex-direction-column-medium

u-flex-direction-row-small

u-flex-direction-column-small

u-flex-direction-row-xsmall

u-flex-direction-column-xsmall

Grid

Grid Utilities

u-grid-autofit

u-grid-autofill

u-grid-custom

u-grid-breakout

u-grid-subgrid

Column Start Utilities

u-column-start-auto

u-column-start-1

u-column-start-2

u-column-start-3

u-column-start-4

u-column-start-5

u-column-start-6

u-column-start-7

u-column-start-8

u-column-start-9

u-column-start-10

u-column-start-11

u-column-start-12

Column Utilities

u-column-span-full

u-column-span-indent

u-column-span-1

u-column-span-2

u-column-span-3

u-column-span-
4

u-column-span-
5

u-column-span-6

u-column-span-
7

u-column-span-8

u-column-span-9

u-column-span-10

u-column-span-11

u-column-span-12

Row Start Utilities

u-row-start-auto

u-row-start-1

u-row-start-2

u-row-start-3

u-row-start-4

u-row-start-5

u-row-start-6

Row Span Utilities

u-row-span-1

u-row-span-2

u-row-span-3

u-row-span-4

u-row-span-5

u-row-span-6

Order Utilities

u-order-first

u-order-last

u-order-first-medium

u-order-auto-medium

u-order-last-medium

u-order-first-small

u-order-auto-small

u-order-last-small

u-order-first-xsmall

u-order-auto-xsmall

u-order-last-xsmall

Sizes

Gap Utilities

u-gap-default

u-gap-inherit

u-gap-gutter

u-gap-0

u-gap-1

u-gap-2

u-gap-3

u-gap-4

u-gap-5

u-gap-6

u-gap-7

u-gap-8

Row Gap Utilities

u-gap-row-inherit

u-gap-row-gutter

u-gap-row-0

u-gap-row-1

u-gap-row-2

u-gap-row-3

u-gap-row-4

u-gap-row-5

u-gap-row-6

u-gap-row-7

u-gap-row-8

Margin Top Utilities

u-margin-top-auto

u-margin-top-gutter

u-margin-top-text

u-margin-top-0

u-margin-top-1

u-margin-top-2

u-margin-top-3

u-margin-top-4

u-margin-top-5

u-margin-top-6

u-margin-top-7

u-margin-top-8

Margin Bottom Utilities

u-margin-bottom-auto

u-margin-bottom-gutter

u-margin-bottom-text

u-margin-bottom-0

u-margin-bottom-1

u-margin-bottom-2

u-margin-bottom-3

u-margin-bottom-4

u-margin-bottom-5

u-margin-bottom-6

u-margin-bottom-7

u-margin-bottom-8

Padding Utilities

u-padding-sitemargin

u-padding-gutter

u-padding-0

u-padding-1

u-padding-2

u-padding-3

u-padding-4

u-padding-5

u-padding-6

u-padding-7

u-padding-8

u-padding-small

u-padding-main

u-padding-large

Padding Block Utilities

u-padding-block-sitemargin

u-padding-block-gutter

u-padding-block-0

u-padding-block-1

u-padding-block-2

u-padding-block-3

u-padding-block-4

u-padding-block-5

u-padding-block-6

u-padding-block-7

u-padding-block-8

u-padding-block-small

u-padding-block-main

u-padding-block-large

Padding Inline Utilities

u-padding-inline-sitemargin

u-padding-inline-gutter

u-padding-inline-0

u-padding-inline-1

u-padding-inline-2

u-padding-inline-3

u-padding-inline-4

u-padding-inline-5

u-padding-inline-6

u-padding-inline-7

u-padding-inline-8

Padding Top Utilities

u-padding-top-sitemargin

u-padding-top-gutter

u-padding-top-0

u-padding-top-1

u-padding-top-2

u-padding-top-3

u-padding-top-4

u-padding-top-5

u-padding-top-6

u-padding-top-7

u-padding-top-8

u-padding-top-small

u-padding-top-main

u-padding-top-large

Padding Bottom Utilities

u-padding-bottom-sitemargin

u-padding-bottom-gutter

u-padding-bottom-0

u-padding-bottom-1

u-padding-bottom-2

u-padding-bottom-3

u-padding-bottom-4

u-padding-bottom-5

u-padding-bottom-6

u-padding-bottom-7

u-padding-bottom-8

u-padding-bottom-small

u-padding-bottom-main

u-padding-bottom-large

Padding Left Utilities

u-padding-left-sitemargin

u-padding-left-gutter

u-padding-left-0

u-padding-left-1

u-padding-left-2

u-padding-left-3

u-padding-left-4

u-padding-left-5

u-padding-left-6

u-padding-left-7

u-padding-left-8

Padding Right Utilities

u-padding-right-sitemargin

u-padding-right-gutter

u-padding-right-0

u-padding-right-1

u-padding-right-2

u-padding-right-3

u-padding-right-4

u-padding-right-5

u-padding-right-6

u-padding-right-7

u-padding-right-8

Border Radius Utilities

u-radius-none

u-radius-inherit

u-radius-small

u-radius-main

u-radius-large

u-radius-round

Aspect Ratio Utilities

u-ratio-2-1

u-ratio-16-9

u-ratio-3-2

u-ratio-5-4

u-ratio-1-1

u-ratio-4-5

u-ratio-2-3

u-ratio-auto

Miscellaneous

Icon Size Utilities

u-icon-size-xsmall

u-icon-size-small

u-icon-size-main

u-icon-size-large

Display Utilities

u-display-block

u-display-inline-block

u-display-inline-flex

u-display-inline-grid

u-display-inline

u-display-contents

u-display-none

u-hide-if-empty

u-hide-if-empty-cms

u-display-contents-medium

u-display-contents-small

u-display-contents-xsmall

u-display-block-medium

u-display-block-small

u-display-block-xsmall

u-display-grid-medium

u-display-grid-small

u-display-grid-xsmall

u-display-flex-medium

u-display-flex-small

u-display-flex-xsmall

u-display-none-medium

u-display-none-small

u-display-none-xsmall

Overflow Utilities

u-overflow-visible

u-overflow-hidden

u-overflow-clip

u-overflow-scroll

u-overflow-auto

u-overflow-x-auto

u-overflow-y-auto

u-overflow-hidden-left

Z-Index Utilities

u-zindex-negative

u-zindex-0

u-zindex-unset

u-zindex-1

u-zindex-2

u-zindex-3

Position Utilities

u-position-static

u-position-relative

u-position-absolute

u-position-fixed

u-position-sticky

Element Utilities

u-grid-wrapper

u-grid

u-content-wrapper

u-image-wrapper

u-image

u-height-full

u-iframe-wrapper

u-iframe

u-button-wrapper

u-video

u-svg

u-path

u-section

u-container

u-container-small

u-container-full

u-embed-js

u-embed-css

Containers

u-container

u-container-small

u-container-xsmall

u-container-full

u-max-width-main

u-max-width-small

u-max-width-xsmall

CMS Conditional Visibility

u-check-for-image

u-check-for-text

u-check-for-link

u-check-for-toggle

u-cms-image

u-hide-if-empty-image

u-show-if-empty-image

u-cms-text

u-hide-if-empty-text

u-show-if-empty-text

u-cms-link

u-hide-if-empty-link

u-show-if-empty-link

u-cms-toggle

u-hide-if-empty-toggle

u-show-if-empty-toggle

Other Utilities

u-width-auto

u-min-width-auto

u-max-width-none

u-max-width-full

u-width-full

u-height-full

u-all-unset-medium

u-all-unset-small

u-all-unset-xsmall

u-text-trim-off

u-button-group

u-margin-inline-auto

u-margin-left-auto

u-margin-right-auto

u-margin-trim

u-ignore-trim

u-pointer-on

u-pointer-off

u-object-fit-cover

u-object-fit-contain

u-min-height-screen

u-cover

u-cover-absolute

u-sr-only

u-inline-container