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
Section 2
Section 3

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

Text LinkText LinkText LinkText Link
Privacy PolicyTerms of Service
Copyright 20xx

Complex footer

Pound sign, pound sign, explosion.
Label
Label
Social Media
© 20xx. All Rights Reserved.

Academic-Level Excellence, Business-Level Speed.

Our WorkAbout TRGResource HubBlogConnect WIth Us
Stay in tune with new resources by getting our newsletter.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copyright ©20xx The Rucks Group, LLC
7887 Washington Village Drive, Suite 250, Dayton, Ohio 45459
Phone: 937-242-7024
Fax: 937-242-7026

Unlock the Resource Hub

Email Address
In which of these areas are you most interested? (Select all that apply):
Thanks! Sending you to your resource...
Oops! Something went wrong while submitting the form.
Get Access to More!

Our curated resource hub offers tools, insights, and guides designed to help organizations like yours strengthen strategy, navigate complexity, and achieve meaningful results. Enter your email to unlock full access to our Resource Hub.

We’ll never share your information.

Unlock the Resource Hub

Email Address
In which of these areas are you most interested? (Select all that apply):
Thanks! Sending you to your resource...
Oops! Something went wrong while submitting the form.
Get Access to More!

Our curated resource hub offers tools, insights, and guides designed to help organizations like yours strengthen strategy, navigate complexity, and achieve meaningful results. Enter your email to unlock full access to our Resource Hub.

We’ll never share your information.