01. Colors 02. Typography 03. Buttons & CTAs 04. Components 05. Layouts 06. Misc. Elements

Colors

Spanish blue- #046FC9

Xanthic - #E7EE23

White - #FFFFFF

Web Colors

Gradients

Primary Gradient
#046FC9- #E7EE23

Light Gradient
#E7EE23- #FFFFFF

Alerts

Success - #73ec99

Error - #f84568

Warning - #FF4A1C

Typography

Aa

Fira Sans
Bold

Aa

Fira Sans
Semibold

Aa

Fira Sans
Regular

Headings

The quick brown fox jumps over the lazy dog

H1 - 38PX / 44PX - Fira Sans Bold

The quick brown fox jumps over the lazy dog

H2 - 32PX / 39PX - Fira Sans

The quick brown fox jumps over the lazy dog

H3 - 24PX / 30PX- Fira Sans Bold

The quick brown fox jumps over the lazy dog

H3 Alt - 21PX / 35PX- Fira Sans Normal | Center

The quick brown fox jumps over the lazy dog

H4 - 18PX / 24PX- Fira Sans Bold
The quick brown fox jumps over the lazy dog
H5 - 14PX / 20PX - Fira Sans Bold
The quick brown fox jumps over the lazy dog
H4 - 12PX / 18PX- Fira Sans Bold

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.

PARAGRAPH TEXT - 18PX/ 25PX- Fira Sans

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.

The .p1 class can have a number of combo-classes applied to it, such as -
‍
.small (reduces font size to 14px / 20px).
.tiny (reduces font size to 12px / 18px).
.centered (center aligns the text).
.caps (makes the the text all CAPS).

PARAGRAPH TEXT VARIABLES - 18PX/ 25PX- Fira Sans

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.

PARAGRAPH TEXT - 18PX/ 25PX - Fira Sans

Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

‍

This is a H2 heading

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.

‍

This is a H3 heading

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.

‍

This is a H4 heading

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

‍

This is a H5 heading

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

‍

This is a H6 heading

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

This is caption!

‍

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

‍

This an unordered list -

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

‍

This is a H2 heading

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.

‍

This is a H3 heading

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.

‍

This is a H4 heading

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

‍

This is a H5 heading

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

‍

This is a H6 heading

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

This is caption!

‍

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

‍

This an unordered list -

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

Buttons

Button Text
Button - Primary

Components

Split
Gp
G
a
Pts
ppg
shg
Eng
otg
pen
Away
1
1
1
1
1
1
1
1
1
Home
1
1
1
1
1
1
1
1
1