WT Styleguide — V2

Style Guide - Typography

TypographyColoursComponents

Basic design system for site-wide styling. This is where creativity begins. Clone it and own it.

Headings

All H1 Headings

Heading 1

title-xxl
Title XXL
All H2 Headings

Heading 2

title-xl
Title XL
All H3 Headings

Heading 3

title-l
Title L
All H4 Headings

Heading 4

title-m
Title M
All H5 Headings
Heading 5
title-s
Title S
All H6 Headings
Heading 6
title-xs
Title XS

Paragraphs, Lists, Quotes & Links

All Paragraphs

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.

body-l

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.

body-s

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.

label

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.

overline

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.

All Block Quotes
Block Quote
All Unordered Lists
  • List item
  • List item
  • List item
All Ordered Lists
  1. List item
  2. List item
  3. List item
All Links
Text Link
All Bolds
Bold Text
All Italics
Text Italics

Text Alignments

is--align-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

is--align-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

is--align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

is--align-justified

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Utility Text Styles

is---strikethrough

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

is--muted

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

is--allcaps

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

is--nowrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

is--elipsis-1-line

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.

is--elipsis-2-lines

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.

is--elipsis-3-lines

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.

Rich Text Elements

is--rtb

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Figure caption

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

‍