Style Guide

Lumos | v2.0.4

Typography

Font Styles

u-text-display

Display

Heading

u-text-h1

Heading

u-text-h2

Heading

u-text-h3

Heading

u-text-h4

Heading

u-text-h5

Heading

u-text-h6

Heading

u-text-main

Paragraph

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

u-text-large

Paragraph Large

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

u-text-small

Paragraph Small

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

u-text-link

Text Link

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

Typography Elements

All Ordered List

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

All Unordered List

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

All Block Quotes

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

u-rich-text

Lorem ipsum dolor sit amet, consectetur adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

Color

Themes

data-theme="light"

Heading

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

data-theme="dark"

Heading

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

data-theme="invert"

Heading

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

data-theme="inherit"

Heading

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

Text Colors

u-text-color-1

Lorem ipsum dolor

u-text-color-2

Lorem ipsum dolor

u-text-color-3

Lorem ipsum dolor

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Background Colors

u-bg-color-1

u-bg-color-3

Border Colors

u-border-color-1

u-bg-color-1

u-bg-color-3

UI Elements

A lot of the UI elements are built into re-usable components,
To see and edit them click on the button below

Button Styles

data-button-style="primary"

data-button-style="secondary"

Icons

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Grid

Grid Utilities

u-grid-custom

u-grid-breakout

u-grid-desktop

u-grid-tablet

u-grid-landscape

u-grid-breakout

u-grid-custom

u-grid-column-2

u-grid-column-3

u-grid-column-4

u-grid-autofit

u-grid-subgrid

Column Utilities

u-column-custom

u-column-full

u-column-indent

u-column-1

u-column-2

u-column-3

u-column-4

u-column-5

u-column-6

u-column-7

u-column-8

u-column-9

u-column-10

u-column-11

u-column-12

Order Utilities

u-order-first

u-order-first-desktop

u-order-first-tablet

u-order-last

u-order-last-desktop

u-order-last-tablet

Flex

Horizontal Flex Utilities

u-hflex-left-top

u-hflex-left-center

u-hflex-left-bottom

u-hflex-left-stretch

u-hflex-center-top

u-hflex-center-center

u-hflex-center-bottom

u-hflex-center-stretch

u-hflex-right-top

u-hflex-right-center

u-hflex-right-bottom

u-hflex-right-stretch

u-hflex-between-top

u-hflex-between-center

u-hflex-between-bottom

u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top

u-vflex-left-center

u-vflex-left-bottom

u-vflex-left-between

u-vflex-center-top

u-vflex-center-center

u-vflex-center-bottom

u-vflex-center-between

u-vflex-right-top

u-vflex-right-center

u-vflex-right-bottom

u-vflex-right-between

u-vflex-stretch-top

u-vflex-stretch-center

u-vflex-stretch-bottom

u-vflex-stretch-between

Other Flex Utilities

u-hflex-wrap

u-vflex-wrap

u-flex-shrink

u-flex-grow

u-flex-noshrink

Gap Utilities

u-gap-none

u-gap-main

u-gap-xsmall

u-gap-small

u-gap-medium

u-gap-large

Adaptive Sizes

Fluid Sizing

This site uses fluid responsive sizing system for sizes and typography. To update the scaling system use the tool to the right and then copy and paste the code into the responsive code embed within the global Custom Code component.

Size

0.125

0.25

0.5

0.75

1.25

1.5

2.5

3.5

4.5

5.5

6.5

7.5

8.5

9.5

Miscellaneous

Utilities

u-height-screen

u-max-width-none

u-visual-wrap

u-display-none

u-cover

u-cover-absolute

u-bg-flex

u-sr-only

u-container

data-padding-top="none"

data-padding-bottom="none"

data-padding-top="small"

data-padding-bottom="small"

data-padding-top="main"

data-padding-bottom="main"

data-padding-top="large"

data-padding-bottom="large"