Typography

Sizes and fonts for headers, paragraphs, and text blocks used throughout the site.

Heading 1

Heading

Heading 2

Heading

Heading 3

Heading

Heading 4

Heading

Heading 5

Heading

Text Display 1

This is some text inside of a div block.

Text Display 2

This is some text inside of a div block.

Text Display 3

This is some text inside of a div block.

Text Display 4

This is some text inside of a div block.

Small Paragraph

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

Big Paragraph

Rich Text

Rich Text used throughout the site. Make sure it has the class name '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.

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.

‍

Cool thing one
Very cool thing two
Awesome cool thing three

Colors

Color scheme used throughout the site.

Buttons

Buttons and Link blocks used through the site. They are identified by their class name.

Primary Link Block

Learn More

Primary Button

All Episodes

Play Button

12 Column System

12 Column System provides more unique layouts and designs and easy to optimize for multiple screen sizes. The columns are identified with their class names. There is more reading material on the matter in the instructions page.

Column, Desk 1

Column, Desk 2

Column, Desk 3

Column, Desk 4

Column, Desk 5

Column, Desk 6

Column, Desk 7

Column, Desk 8

Column, Desk 9

Column, Desk 10

Column, Desk 11

Column, Desk 12

Grids

Grids used throughout the site. Grids make it easy for spacing and all the grids listed here have been optimized for all screen sizes.

Style Guide

Typography

Heading 1

Heading

Heading 2

Heading

Heading 3

Heading

Heading 4

Heading

Heading 5

Heading

Text Display 1

Text Display 2

Text Display 3

Text Display 4

Small Paragraph

Paragraph

Big Paragraph

Rich Text

What’s a Rich Text element?

Static and dynamic content editing

How to customize formatting for each rich text

Colors

Buttons

Primary Link Block

Primary Button

Play Button

12 Column System

Column, Desk 1

Column, Desk 2

Column, Desk 3

Column, Desk 4

Column, Desk 5

Column, Desk 6

Column, Desk 7

Column, Desk 8

Column, Desk 9

Column, Desk 10

Column, Desk 11

Column, Desk 12

Grids

1-2 Grid

4 Grid

Spacers

Spacer 8

Spacer 16

Spacer 24

Spacer 48

Spacer 64

Spacer 96