TYPOGRAPHY

You'll notice that these typography elements don't have classes. On this page, we're editing styles for "All H1 Headings" or "All H2 Headings." This will effect all the elements on the site.

Heading 1

h1
Circular Std, Bold 54px/54px

Heading 2

h2
Circular Std, Bold 54px/120%

Heading 3

h3
Circular Std, Bold 32px/120%

Heading 4

h4
Bebas Neue, Normal 20px/25px, All Caps
Heading 5
h5
Heading 6
h6

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
PT Sans, 21px/31px
Block Quote
blockquote
Circular Std, Bold 28px/34px, Text Centered
Text Link
text link
PT Sans, Bold 21px/31px, Jaffa
Inline Text

What’s a Rich Text element?

What’s a Rich Text element?

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.

  • Bullet Point
  • Bullet Point
  1. List item
  2. List Item
  3. List Item

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

rich text

COLORS

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Primary

pistachio
#8FC603
radical-red
#FF4558
turbo
#FFE600
bright-turquoise
#1AC3F1
jaffa
#F48544
cod-gray
#0E0E0E
mercury
#E5E5E5

Neutrals

white
#FFF
gray-100
#f7fafc
gray-200
#EDF2F7
gray-300
#E2E8F0
gray-400
#CBD5E0
gray-500
#A0AEC0
gray-600
#718096
gray-700
#4a5568
gray-800
#2d3748
gray-900
#1a202c
black
#000

LOGO

These are sample logos that can be downloaded

color primary logo
Text Link
white logo
Text Link

FORMS

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

COMPONENTS

Internships Hero Graphic

Team

You are only as strong as your team.

Heading

You are only as strong as your team.

Creating ZEAL podcast cover

Creating ZEAL Podcast

We take our work, our guests, and conversations seriously... but not ourselves. Each week our hosts share unique experiences that will hopefully inspire and challenge you to make something stellar.

Subscribe
Stars
5.0 Stars

Blog

We’re about more than just quality code. We value empathy, ethusiasm, capacity, and an unyielding eagerness to learn.