Main
Texts
HTML Heading & Text Tags
H1 Heading - Headline
H2 Heading - Section Title
H3 Heading - Subtitle
Paragraph
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.
Pull Quotes & Stats
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.
Heading Classes
Heading XXL
Heading
Heading XL
Heading
Heading L
Heading
Text Classes
Text L
This is some text inside of a div block.
Text M
This is some text inside of a div block.
Text S
This is some text inside of a div block.
Text Modifiers - Text Style
Text Decoration Strikethrough
This is some text inside of a div block.
Text Decoration Underline
This is some text inside of a div block.
Text Style Italic
This is some text inside of a div block.
Text Transform None
This is some text inside of a div block.
Text Transform Uppercase
This is some text inside of a div block.
Text Transform Capitalize
This is some text inside of a div block.
Text Transform Lowercase
This is some text inside of a div block.
Text Style No Wrap
This is some text inside of a div block.
Text Style Block Quote
This is some text inside of a div block.
Text Modifiers - Text Weight
Text Weight Normal
This is some text inside of a div block.
Text Weight Medium
This is some text inside of a div block.
Text Weight Bold
This is some text inside of a div block.
Text Modifiers - Line Height
Line Height 100
This is some text inside of a div block.
Line Height 125
This is some text inside of a div block.
Line Height 150
This is some text inside of a div block.
Text Modifiers - Text Alignment
Text Alignment Left
This is some text inside of a div block.
Text Alignment Center
This is some text inside of a div block.
Text Alignment Right
This is some text inside of a div block.
Text Alignment Justify
This is some text inside of a div block.
Text Modifiers - Text Color
Text Color Primary
This is some text inside of a div block.
Text Color Secondary
This is some text inside of a div block.
Text Color Tertiary
This is some text inside of a div block.
Text Color White
This is some text inside of a div block.
Rich Text
Rich Text
Heading 1
Heading 2
Heading 3
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
-
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Colors
Color Palette
Black
White
Goldenrod
Tangerine
Charcoal
Slate
Graphite
Flint
Quicksilver
Ash
Bone
Ivory
Red - Arts & Humanities
Purple - Business
Blue - Computational Sciences
Green - Natural Sciences
Gold - Social Sciences
Grey - Sustainability
Navy - Year 1
Pink - Year 2
Yellow - Year 3
Purple - Year 4
Backgrounds
Background Primary
Background Secondary
Background Black
Background White
Assets
Images
Image 16x5
Image 21x9
Image 16x9
Image 2x1
Image 4x3
Image 1x1
Image 1x2
Icons - Icon Sizes
Icon S
Icon M
Icon L
Icon 1x1 S
Icon 1x1 M
Icon 1x1 L
Social Media Icons
Links
Structure
Wrappers
Page Wrapper
Page Wrapper
Main
Page Padding
Page Padding
Header Wrapper
Header Wrapper
Heading Wrapper
Heading Wrapper
Text Wrapper
Text Wrapper
Margin Wrapper
Margin Wrapper
Containers
Container L
Container L
Container M
Container M
Container S
Container S
Max Width
Full Width
Full Width
Full Width Tablet
Full Width Tablet
Full Width Mobile Landscape
Full Width Mobile Landscape
Full Width Mobile
Full Width Mobile
Max Width XXL
Max Width XXL
Max Width XL
Max Width XL
Max Width L
Max Width L
Max Width M
Max Width M
Max Width S
Max Width S
Max Width XS
Max Width XS
Max Width XXS
Max Width XXS
Utility
Z - 1
Z - 1
Z - 2
Z - 2
Clean Space
Clean Space
Center Element
Center Element
Overflow - Visible
Overflow - Visible
Overflow - Hidden
Overflow - Hidden
Overflow - Scroll
Overflow - Scroll
Overflow - Auto
Overflow - Auto
Hide - Show
Hide
GC Hide
Hide Tablet
Hide Mobile Landscape
Hide Mobile Portrait
Show
Show
Show Tablet
Show Tablet
Show Mobile Landscape
Show Mobile Landscape
Show Mobile Portrait
Show Mobile Portrait
Margins
Margins - Top
Margin Top - Auto
This is some text inside of a div block.
Margin Top - XXL
This is some text inside of a div block.
Margin Top - XL
This is some text inside of a div block.
Margin Top - L
This is some text inside of a div block.
Margin Top - M
This is some text inside of a div block.
Margin Top - S
This is some text inside of a div block.
Margin Top - XS
This is some text inside of a div block.
Margin Top - XXS
This is some text inside of a div block.
Margin Top - 0
This is some text inside of a div block.
Margins - Right
Margin Right - Auto
This is some text inside of a div block.
Margin Right - XXL
This is some text inside of a div block.
Margin Right - XL
This is some text inside of a div block.
Margin Right - L
This is some text inside of a div block.
Margin Right - M
This is some text inside of a div block.
Margin Right - S
This is some text inside of a div block.
Margin Right - XS
This is some text inside of a div block.
Margin Right - XXS
This is some text inside of a div block.
Margin Right - 0
This is some text inside of a div block.
Margins - Bottom
Margin Bottom - Auto
This is some text inside of a div block.
Margin Bottom - XXL
This is some text inside of a div block.
Margin Bottom - XL
This is some text inside of a div block.
Margin Bottom - L
This is some text inside of a div block.
Margin Bottom - M
This is some text inside of a div block.
Margin Bottom - S
This is some text inside of a div block.
Margin Bottom - XS
This is some text inside of a div block.
Margin Bottom - XXS
This is some text inside of a div block.
Margin Bottom - 0
This is some text inside of a div block.
Margins - Left
Margin Left - Auto
This is some text inside of a div block.
Margin Left- XXL
This is some text inside of a div block.
Margin Left - XL
This is some text inside of a div block.
Margin Left - L
This is some text inside of a div block.
Margin Left - M
This is some text inside of a div block.
Margin Left - S
This is some text inside of a div block.
Margin Left - XS
This is some text inside of a div block.
Margin Left - XXS
This is some text inside of a div block.
Margin Left- 0
This is some text inside of a div block.
Paddings Mobile
Padding Mob - All Sides
Padding Mob - XXL
This is some text inside of a div block.
Padding Mob - XL
This is some text inside of a div block.
Padding Mob - L
This is some text inside of a div block.
Padding Mob - M
This is some text inside of a div block.
Padding Mob - S
This is some text inside of a div block.
Padding Mob - XS
This is some text inside of a div block.
Padding Mob - XXS
This is some text inside of a div block.
Padding Mob - 0
This is some text inside of a div block.
Padding Mob - Y
Padding Y Mob - XXL
This is some text inside of a div block.
Padding Y Mob - XL
This is some text inside of a div block.
Padding Y Mob - L
This is some text inside of a div block.
Padding Y Mob - M
This is some text inside of a div block.
Padding Y Mob - S
This is some text inside of a div block.
Padding Y Mob - XS
This is some text inside of a div block.
Padding Y Mob - XXS
This is some text inside of a div block.
Padding Y Mob - 0
This is some text inside of a div block.
Padding Mob - X
Padding X Mob - XXL
This is some text inside of a div block.
Padding X Mob - XL
This is some text inside of a div block.
Padding X Mob - L
This is some text inside of a div block.
Padding X Mob - M
This is some text inside of a div block.
Padding X Mob - S
This is some text inside of a div block.
Padding X Mob - XS
This is some text inside of a div block.
Padding X Mob - XXS
This is some text inside of a div block.
Padding X Mob - 0
This is some text inside of a div block.
Padding Mob - Top
Padding Top Mob - XXL
This is some text inside of a div block.
Padding Top Mob - XL
This is some text inside of a div block.
Padding Top Mob - L
This is some text inside of a div block.
Padding Top Mob - M
This is some text inside of a div block.
Padding Top Mob - S
This is some text inside of a div block.
Padding Top Mob - XS
This is some text inside of a div block.
Padding Top Mob - XXS
This is some text inside of a div block.
Padding Top Mob - 0
This is some text inside of a div block.
Padding Mob - Right
Padding Right Mob - XXL
This is some text inside of a div block.
Padding Right Mob - XL
This is some text inside of a div block.
Padding Right Mob - L
This is some text inside of a div block.
Padding Right Mob - M
This is some text inside of a div block.
Padding Right Mob - S
This is some text inside of a div block.
Padding Right Mob - XS
This is some text inside of a div block.
Padding Right Mob - XXS
This is some text inside of a div block.
Padding Right Mob - 0
This is some text inside of a div block.
Padding Mob - Bottom
Padding Bottom Mob - XXL
This is some text inside of a div block.
Padding Bottom Mob - XL
This is some text inside of a div block.
Padding Bottom Mob - L
This is some text inside of a div block.
Padding Bottom Mob - M
This is some text inside of a div block.
Padding Bottom Mob - S
This is some text inside of a div block.
Padding Bottom Mob - XS
This is some text inside of a div block.
Padding Bottom Mob - XXS
This is some text inside of a div block.
Padding Bottom Mob - 0
This is some text inside of a div block.
Padding Mob - Left
Padding Left Mob - XXL
This is some text inside of a div block.
Padding Left Mob - XL
This is some text inside of a div block.
Padding Left Mob - L
This is some text inside of a div block.
Padding Left Mob - M
This is some text inside of a div block.
Padding Left Mob - S
This is some text inside of a div block.
Padding Left Mob - XS
This is some text inside of a div block.
Padding Left Mob - XXS
This is some text inside of a div block.
Padding Left Mob - 0
This is some text inside of a div block.
