Native Blocks

Display

Short display headline

font-family: AvenirNext-Medium;
font-size: 62px;
color: #000000;
letter-spacing: 0;
line-height: 70px;

Short display headline

font-family: AvenirNext-Medium;
font-size: 56px;
color: #000000;
letter-spacing: 0;
line-height: 64px;

Short display headline

font-family: AvenirNext-Medium;
font-size: 40px;
color: #000000;
letter-spacing: 0;
line-height: 50px;

Short display headline

font-family: AvenirNext-Medium;
font-size: 30px;
color: #000000;
letter-spacing: 0;
line-height: 40px;

Short display headline

font-family: AvenirNext-DemiBold;
font-size: 24px;
color: #000000;
letter-spacing: 0;
line-height: 32px;

Short display headline

font-family: AvenirNext-DemiBold;
font-size: 20px;
color: #000000;
letter-spacing: 0;
line-height: 26px;

Short display headline

font-family: AvenirNext-DemiBold;
font-size: 16px;
color: #000000;
letter-spacing: 1.78px;
line-height: 26px;

Paragraph – SMALL

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf. Landjaeger cupim drumstick ham hock ground round picanha.

font-family: AvenirNext-Medium;
font-size: 15px;
color: #726878;
letter-spacing: 0;
line-height: 23px;

Paragraph – MEDIUM

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf. Landjaeger cupim drumstick ham hock ground round picanha.

font-size: 18px;
line-height: 26px;

Paragraph – LARGE

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf. Landjaeger cupim drumstick ham hock ground round picanha.

font-size: 20px;
line-height: 29px;

Bulleted List (Light background)

Verum habebit modum
Et luxuriosus eodem modo dat enim
Intervalla et relaxat nec tamen ullo modo

Bulleted List (Dark background)

Verum habebit modum
Et luxuriosus eodem modo dat enim
Intervalla et relaxat nec tamen ullo modo

Checklist

Verum habebit modum
Et luxuriosus eodem modo dat enim
Intervalla et relaxat nec tamen ullo modo

Blockquote

Qui convenit? Deinde dolorem quem maximum? Qui potest igitur habitare in beata vita summi mali metus? Inde sermone vario [redacted] illa a Dipylo stadia confecimus. Huic mori optimum esse propter desperationem sapientiae.”

font-family: AvenirNext-Medium;
font-size: 22px;
color: #726878;
letter-spacing: 0;
line-height: 33px;

Buttons

Primary Button:

Hover:

White Button:

Hover

Text Link CTAS:

Hover:

Outlined Button:

Hover:

White Outline:

Hover

Forms

Images

Portrait
Rounded Corners

Landscape
Rounded Corners

Portrait with overlapping graphic

Image treatment: Gradient on Left

Portrait
Rounded Corners

Image treatment: Gradient on Right

Important Note:

Site editor should be able to choose gradient left OR right for placement on image
Site editor should be able to select which gradient they want to use (yelllow/teal, orange/bright purple, pink/bright green)

Video Block

Play Lorem Ipsum Dolor Video

Groups – Container Styles

White Shadow:

Rounded Corners:

Purple background with angled gradient shape
Note: graphic element should always be centered vertically & horizontally in container

Purple background with organic gradient
Note: gradient should always be positioned top right corner

Animations

Please include the following animation styles as options in the back end. The goal is to have certain elements (mainly text, but some entire blocks) animate on the site.