Components

Knockout's component library offers 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

Image placeholder.

Heading

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

Graphic hero

Heading left aligned

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

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

Image placeholder.

Heading

This is some text inside of a div block.

Side x Side

Heading

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

3up photos

Image placeholder.

Heading

Image placeholder.

Heading

Image placeholder.

Heading

3up text

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

Heading

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

Heading

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

Heading

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

Card matrix

Black geometric box.
Heading
This is some text inside of a div block.
Black geometric box.
Heading
This is some text inside of a div block.
Black geometric box.
Heading
This is some text inside of a div block.
Black geometric box.
Heading
This is some text inside of a div block.
Black geometric box.
Heading
This is some text inside of a div block.
Black geometric box.
Heading
This is some text inside of a div block.

Slider

Image placeholder.
Image placeholder.
Image placeholder.

Peeking slider

Image placeholder.
Image placeholder.
Image placeholder.

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

Edgar Allan icon logo.
Edgar Allan icon logo.
Edgar Allan icon logo.
Edgar Allan icon logo.
Edgar Allan icon logo.

Customer testimonials slider

White geometric box.
This is some text inside of a div block.
This is some text inside of a div block.
White geometric box.
This is some text inside of a div block.
This is some text inside of a div block.
White geometric box.
This is some text inside of a div block.
This is some text inside of a div block.

Simple footer

Complex footer