01. Colors02. Typography03. Buttons & CTAs04. Components05. Layouts06. Misc. Elements

Colors

Green pantone- #37b34a

Sacramento State Green - #00382f

Honey Yellow - #f6b42e

Caroline Blue - #1fa2ea

Blood Red - #660000

Royal Blue Dark - #022a64

Web Colors

Alerts

Success - #73ec99

Error - #ab0103

Warning - #FF4A1C

Typography

Aa

Kufam
Regular

Aa

Roboto
Regular

Aa

Satisfy
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 an 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 an 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 an H4 heading

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

This is an H5 heading

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

This is an H6 heading

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

This is a 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 an 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 an 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 an H4 heading

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

This is an H5 heading

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

This is an H6 heading

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

This is a 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 - Primary
Button - Secondary

Components

Free
Handicapping
Label - Primary

No Results Found

Please try different filters.