Components

Components are examples of how the utility classes work together, but can also serve as a starting point for responsive development.

Navbar - Tablet Dropdown

Navbar - Mobile Dropdown

Basic hero

Heading

This is some text inside of a div block.
Button Text

Graphic hero

Headingoisdg

This is some text inside of a div block.

Section intro

Heading

This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.

1up

Heading

This is some text inside of a div block.
Button Text

Side x Side

Heading

This is some text inside of a div block.

3up photos

Heading

Heading

Heading

3up text

This component uses Margin Offset - S to offset the far left & far right padding.

Heading

This is some text
This is some text inside of a div block.
Text Link

Heading

This is some text
This is some text inside of a div block.
Text Link

Heading

This is some text
This is some text inside of a div block.
Text Link

Card matrix

Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.

Slider

Peeking slider

Floating sidebar

Section 1

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.

Lorem ipsum dolar.

Section 2

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.

Section 3

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.

Frequently Asked Questions

This is a question

This is some text inside of a div block.

Logo set

Customer testimonials slider

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Simple footer

Complex footer