Native Blocks

Display

Short display headline

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

H1

Short display headline

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

H2

Short display headline

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

H3

Short display headline

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

H4

Short display headline

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

H5

Short display headline

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

H6

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

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:

Action

Hover:

Action

White Button:

Action

Hover

Action

Text Link CTAS:

Action

Hover:

Action
Action

Action

Outlined Button:

Action

Hover:

Action

White Outline:

Action

Hover

action

Forms

Images

Portrait
Rounded Corners

Landscape
Rounded Corners

Three women in an office setting collaborate on a coding project. One woman stands, smiling, pointing to a tablet held by a seated woman. Another seated woman uses a keyboard, with a computer monitor displaying code and Native Blocks in front of them. A modern office environment is visible.
A diverse group of six people in a modern office room, attentively listening to someone out of frame. The person in the foreground with curly hair and wearing a green top stands out. Another person is using a laptop with what appears to be the Native Blocks software, while others are seated or standing around a table.

Portrait with overlapping graphic

Image treatment: Gradient on Left

Portrait
Rounded Corners

A badge with the text "aws" featuring the Amazon smile logo above it, "PARTNER" in bold letters, and "Advanced Tier Services" below. The badge has a white background with an orange border and a purple shadow effect.
Three women in an office setting collaborate on a coding project. One woman stands, smiling, pointing to a tablet held by a seated woman. Another seated woman uses a keyboard, with a computer monitor displaying code and Native Blocks in front of them. A modern office environment is visible.
Four people, three men and one woman, are seated at a conference table in an office setting. Two men in the foreground smile at the camera while a woman stands in the background with her arms crossed, smiling. Papers and a phone, adorned with Native Blocks designs, are on the table.

Image treatment: Gradient on Right

A diverse group of six people in a modern office room, attentively listening to someone out of frame. The person in the foreground with curly hair and wearing a green top stands out. Another person is using a laptop with what appears to be the Native Blocks software, while others are seated or standing around a table.

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

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.

Slide-in Up

Slide-in Down

Fade-in

Fade-in Up

Fade-in Down