Show ESG classes and code overlay on click (will prevent drawers and lightboxes from opening)

Class:

Code:

Typography Styles

Prehead

Largest
Heading

Larger
Heading

Large
Heading

Subhead

Bold Prehead

Largest
Bold
Heading

Larger
Bold
Heading

Large
Bold
Heading

Bold
Subhead

Uppercase Prehead

Largest
Upper...
Heading

Larger
Uppercase
Heading

Large
Uppercase
Heading

Uppercase
Subhead

Bold Uppercase Prehead

Largest
Bold
Upper...
Heading

Larger
Bold
Uppercase
Heading

Large
Bold
Uppercase
Heading

Bold
Uppercase
Subhead

Blue Text

Black Text

Gray Text

Light Blue Text

White Text

Blue Bold Text

Black Bold Text

Gray Bold Text

Light Blue Text

White Bold Text

Blue Uppercase Text

Black Uppercase Text

Gray Uppercase Text

Light Blue Text

White Uppercase Text

Blue Bold Uppercase Text

Black Bold Uppercase Text

Gray Bold Uppercase Text

Light Blue Text

White Bold Uppercase Text

Gray Block Heading
Blue Block Heading

Copy size for content copy - lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor dolor id tortor lacinia hendrerit. Donec blandit ante at porta vestibulum. Phasellus eu aliquam ex, non sollicitudin turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis rutrum odio ut mattis. Sed luctus interdum lacus ac viverra. Vestibulum id auctor eros. This is a link in the body copy.

lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor dolor id tortor lacinia hendrerit. Donec blandit ante at porta vestibulum. Phasellus eu aliquam ex, non sollicitudin turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • This is a large copy list - et magnis dis parturient montes, nascetur ridiculus mus
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
This is a large stand-alone text link

Copy size for offer copy - lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor dolor id tortor lacinia hendrerit. Donec blandit ante at porta vestibulum. Phasellus eu aliquam ex, non sollicitudin turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis rutrum odio ut mattis. Sed luctus interdum lacus ac viverra. Vestibulum id auctor eros. This is a link in the body copy.

lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor dolor id tortor lacinia hendrerit. Donec blandit ante at porta vestibulum. Phasellus eu aliquam ex, non sollicitudin turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • This is a large copy list - et magnis dis parturient montes, nascetur ridiculus mus
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
This is a large stand-alone text link

Copy with light text - lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor dolor id tortor lacinia hendrerit. Donec blandit ante at porta vestibulum. Phasellus eu aliquam ex, non sollicitudin turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis rutrum odio ut mattis. Sed luctus interdum lacus ac viverra. Vestibulum id auctor eros. This is a link in the body copy.

lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor dolor id tortor lacinia hendrerit. Donec blandit ante at porta vestibulum. Phasellus eu aliquam ex, non sollicitudin turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • This is a large copy list - et magnis dis parturient montes, nascetur ridiculus mus
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
This is a large stand-alone text link
Play button overlay →

Positioning Styles

Vertically Centered Image →
Top Aligned Image →
Bottom Aligned Image →
Left Anchored Image →
← Right Anchored Image
Responsive Row
River Row (reversed even, background even)
River Row (reversed even, background even)
River Row (reversed even, background odd)
River Row (reversed even, background odd)
River Row (reversed odd, background even)
River Row (reversed odd, background even)
River Row (reversed odd, background odd)
River Row (reversed odd, background odd)
Margin Top None (0px)
Margin Top Smallest (3px)
Margin Top Smaller (5px)
Margin Top Small (8px)
Margin Top Medium (13px)
Margin Top Large (21px)
Margin Top Larger (34px)
Margin Top Largest (55px)
Margin Bottom None (0px)
Margin Bottom Smallest (3px)
Margin Bottom Smaller (5px)
Margin Bottom Small (8px)
Margin Bottom Medium (13px)
Margin Bottom Large (21px)
Margin Bottom Larger (34px)
Margin Bottom Largest (55px)
Child Margin None (0px)
Child Margin None (0px)
Child Margin None (0px)
Child Margin None (0px)
Child Margin Smallest (3px)
Child Margin Smallest (3px)
Child Margin Smallest (3px)
Child Margin Smallest (3px)
Child Margin Smaller (5px)
Child Margin Smaller (5px)
Child Margin Smaller (5px)
Child Margin Smaller (5px)
Child Margin Small (8px)
Child Margin Small (8px)
Child Margin Small (8px)
Child Margin Small (8px)
Child Margin Medium (13px)
Child Margin Medium (13px)
Child Margin Medium (13px)
Child Margin Medium (13px)
Child Margin Large (21px)
Child Margin Large (21px)
Child Margin Large (21px)
Child Margin Large (21px)
Child Margin Larger (34px)
Child Margin Larger (34px)
Child Margin Larger (34px)
Child Margin Larger (34px)
Child Margin Largest (55px)
Child Margin Largest (55px)
Child Margin Largest (55px)
Child Margin Largest (55px)
Padding None (0px)
Padding Smallest (3px)
Padding Smaller (5px)
Padding Small (8px)
Padding Medium (13px)
Padding Large (21px)
Padding Larger (34px)
Padding Largest (55px)
Padding Top None (0px)
Padding Top Smallest (3px)
Padding Top Smaller (5px)
Padding Top Small (8px)
Padding Top Medium (13px)
Padding Top Large (21px)
Padding Top Larger (34px)
Padding Top Largest (55px)
Padding Bottom None (0px)
Padding Bottom Smallest (3px)
Padding Bottom Smaller (5px)
Padding Bottom Small (8px)
Padding Bottom Medium (13px)
Padding Bottom Large (21px)
Padding Bottom Larger (34px)
Padding Bottom Largest (55px)

Child Padding classes are similar to Child Margin classes, except they apply padding to the top and bottom of each child.

Height Smallest (80px)
Height Smaller (160px)
Height Small (240px)
Height Medium (320px)
Height Large (400px)
Height Larger (480px)
Height Largest (560px)
Height Widget Smaller (175px)
Height Widget Small (305px)
Height Widget Large (455px)
Height Widget Larger (610px)

Background Styles

Dark Blue Background

Light Blue Background

Light Gray Background

Dark Gray Background

White Background (useful for persistent navs)

Black Box

White Box

Gradient Up Full

Gradient Up Half

Gradient Up Quarter

Gradient Down Full

Gradient Down Half

Gradient Down Quarter

Radial Gradient

Vertical Gradient

Border Styles

Full Light Gray Border

Full Dark Gray Border

Top Light Gray Border

Top Dark Gray Border

Bottom Light Gray Border

Bottom Dark Gray Border

Full Inset Shadow

Top Inset Shadow

Bottom Inset Shadow

Full Drop Shadow

Top Drop Shadow

Bottom Drop Shadow

Animation Classes

Lightbox
Slide In Effect →
← Slide In Effect
Fade In Effect →
Scale In Effect →