Typography

Font Styles

u-text-display

Display

u-text-h1

Heading One (H1)

u-text-h2

Heading Two (H2)

u-text-h3

Heading Three (H3)

u-text-h4

Heading Four (H4)

u-text-h5

Heading Five (H5)

u-text-h6

Heading Six (H6)

u-text-large

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

u-text-main

Integer blandit hendrerit ultricies. Maecenas at luctus justo. Mauris non facilisis est. In hac habitasse platea dictumst. Integer vulputate tellus eu vehicula euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed lacinia, tellus eget faucibus varius, enim velit vulputate sapien, in euismod ante justo et ante.

Sed quis viverra odio, vitae placerat arcu. Ut placerat, est rutrum interdum lobortis, lacus nisl laoreet nulla, at congue felis dolor eget risus. Nullam commodo orci sed cursus pellentesque. Cras non venenatis turpis. Sed eros massa, vulputate et purus sed, sodales ultricies ante.

u-text-small

Etiam efficitur cursus erat, vitae tincidunt dui sagittis a. Sed molestie, nibh eu pretium venenatis, velit urna euismod elit, ut varius quam nisi nec quam. Quisque magna neque, finibus nec dui vel, pharetra blandit orci. Phasellus ac porta felis. Nam bibendum feugiat sapien, non dictum orci sagittis eu. Etiam vestibulum tempus finibus. Maecenas vel pretium neque. Ut volutpat nisi nec est viverra egestas.

u-text-ui-nav

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

u-text-caption

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

u-text-eyebrow

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

u-text-blockquote

Quisque odio est, iaculis nec eros quis, molestie sodales dolor. Etiam efficitur cursus erat, vitae tincidunt dui sagittis a. Sed molestie, nibh eu pretium venenatis, velit urna euismod elit, ut varius quam nisi nec quam.

u-text-footer-eyebrow

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

u-text-footer-body

Donec pharetra ex sed tortor viverra, faucibus porta orci volutpat. Aenean lacus odio, venenatis nec eros et, volutpat interdum urna. Suspendisse enim nisl, blandit ut sem nec, tincidunt varius dolor.

u-text-footer-nav

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

u-text-footer-small

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

u-marquee-large

Marquee

Font Weight

u-weight-regular

Lorem ipsum dolor

u-weight-medium

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

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

Text Align

u-text-align-left

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

u-text-align-center

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

u-text-align-right

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.

Typography Elements

u-rich-text

Restores default styles

Heading, paragraph, and list styles automatically added to all children within this class.

Heading

u-hide-rich-text-media

Hides non-text items inside a rich text

Ordered List

Styles cleared
From ordered list
By default

Styles added back
To ordered list
When inside u-rich-text

Unordered List

Styles cleared
From unordered list
By default

Styles added back
To unordered list
When inside u-rich-text

Block Quotes

Styles cleared from block quotes by default

Styles added back to block quotes when inside u-rich-text

Colour

Themes

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.

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.

Text Color

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Flexbox

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

Align Self Utilities

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

u-align-items-top

u-align-items-center

u-align-items-bottom

Other Flex Utilities

u-hflex-wrap

u-vflex-wrap

u-flex-shrink

u-flex-grow

u-flex-noshrink

Grid

Grid Utilities

u-grid-custom

u-grid-breakout

u-grid-desktop

u-grid-tablet

u-grid-landscape

u-grid-column-2

u-grid-column-3

u-grid-column-4

u-grid-autofit

u-grid-autofill

u-grid-subgrid

u-grid-flex

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

Sizes

Gap Utilities

u-gap-none

u-gap-inherit

u-gap-gutter

u-gap-xsmall

u-gap-small

u-gap-medium

u-gap-large

Row Gap Utilities

u-gap-row-none

u-gap-row-inherit

u-gap-row-gutter

u-gap-row-xsmall

u-gap-row-small

u-gap-row-medium

u-gap-row-large

Margin Top Utilities

u-mt-none

u-mt-xsmall

u-mt-small

u-mt-medium

u-mt-large

u-mt-main

Margin Bottom Utilities

u-mb-none

u-mb-xsmall

u-mb-small

u-mb-medium

u-mb-large

u-mb-main

Border Radius Utilities

u-radius-none

u-radius-inherit

u-radius-small

u-radius-main

u-radius-round

Section Spacing Attributes

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"

Miscellaneous

Display Utilities

u-display-block

u-display-inline-block

u-display-inline-flex

u-display-inline-grid

u-display-inline

u-display-none

u-hide-if-empty

u-hide-if-empty-cms

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

u-zindex-under-nav

u-zindex-over-nav

Position Utilities

u-position-static

u-position-relative

u-position-absolute

u-position-fixed

u-position-sticky

Other Utilities

u-btn-style

u-btn-wrap-left

u-btn-wrap-center

u-btn-wrap-right

u-btn-wrap-between

u-margin-trim

u-margin-inline-auto

u-pointer-on

u-pointer-off

u-min-height-screen

u-max-width-none

u-width-full

u-height-full

u-cover

u-cover-absolute

u-visual-wrap

u-container

u-container-small

u-container-full

u-sr-only

data-hide-if-empty-cms

Components

glow-link

Button Test

Button | 02a

glow-link glow-inline

Button Test

Button | 02b

glow-link glow-inline-outdent

Button Test

Button | 02c

glow-link glow-inline-outdent-large

Large Button Test (not yet created)

Button | 03

glow-link glow-minimal

Button Test

Button | 04

glow-link glow-pill btn-dot-pill

Button Test

Button | 05

glow-link glow-pill btn-fade-bg

Button Test

Button | 06

glow-link glow-pill btn-dot-outline

Button Test

Button | 06 Longer

glow-link glow-pill btn-dot-outline

A Longer Button Test

Buttons

data-button-style="primary"

Free Consultation

data-button-style="secondary"

Free Consultation

Icons

Global & Starter

Eyebrow Text Here

Heading

Eyebrow Text Here

Heading

Lorem ipsum dolor sit amet elit

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

Eyebrow Text Here

Lorem ipsum dolor sit amet elit

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

Typography

Font Styles

Display

Heading One (H1)

Heading Two (H2)

Heading Three (H3)

Heading Four (H4)

Heading Five (H5)

Heading Six (H6)

Font Weight

Line Clamp

Text Align

Text Transform

Text Wrap

Typography Elements

Restores default styles

Heading

Hides non-text items inside a rich text

Colour

Themes

Heading

Heading

Heading

Heading

Text Color

Flexbox

Horizontal Flex Utilities

Vertical Flex Utilities

Align Self Utilities

Align Items Utilities

Other Flex Utilities

Grid

Grid Utilities

Column Utilities

Order Utilities

Sizes

Gap Utilities

Row Gap Utilities

Margin Top Utilities

Margin Bottom Utilities

Border Radius Utilities

Section Spacing Attributes

Miscellaneous

Display Utilities

Overflow Utilities

Z-Index Utilities

Position Utilities

Other Utilities

Components

Buttons

Icons

Global & Starter

Heading

Heading

Lorem ipsum dolor sit amet elit

Lorem ipsum dolor sit amet elit

Form