Content Component

BAnner Carousel

This component is typically used at the top of home pages or landing pages but can be used on any page. Banners can have multiple slides (10+) and will turn from a static banner into a rotating carousel when more slide items are added. You can modify banner properties in the config tab to control items like banner ratio size or the max height to display.

Each banner slide allows for an image or video, includes 9-point positioning for text, and has a color theme picker associated with it.

Content Component

Horizontal card

Horizontal cards feature an image beside a content area. The content area excepts a title, subtitle, paragraph and call to action. This area can span either 1/3 or 1/2 of the available width. At the smallest breakpoint, the content will stack underneath of the media. A color theme picker makes it easy to select a style.

Black

Themed horizontal card

This is an example.

Learn More

Black

Themed horizontal card

Learn More

Gray

Themed horizontal card

This is an example.

Learn More

Gray

Themed horizontal card

Learn More

White

Themed horizontal card

This is an example.

Learn More

White

Themed horizontal card

Learn More

Yellow

Themed horizontal card

This is an example.

Learn More

Yellow

Themed horizontal card

Learn More

Content Component

Stacked card

Stacked cards feature media in the background, and a content area in the foreground. The media allows for the placement of an image. The content area includes 9-point positioning for text and a theme picker.

You can place a max of 6 and min of 1 next to each other in a row, and they will stack at the smallest breakpoint.

Black

Themed Stacked Card

Learn More

Gray

Themed Stacked Card

Learn More

White

Themed Stacked Card

Learn More

Yellow

Themed Stacked Card

Learn More

White

Themed Stacked Card

Yellow

Themed Stacked Card

Black

Themed Stacked Card

Content Component

Vertical Card

Vertical cards feature media above a content area. You can place a max of 6 and min of 1 next to each other in a row, and they will stack at the smallest breakpoint. The color theme picker makes it easy to select a style.

Black

Theme

Gray

Theme

White

Theme

Yellow

Theme

Black

Theme

Example of paragraph text.

Learn More

Gray

Theme

Example of paragraph text.

Learn More

White

Theme

Example of paragraph text.

Learn More

Black

Theme

Example of paragraph text.

Learn More

Gray

Theme

Example of paragraph text.

Learn More

Black

Theme

Example of paragraph text.

Learn More

Gray

Theme

Example of paragraph text.

Learn More

Content Component

SubCategory banner

This component is made specifically for the subcategory pages with a build-in gradient and theme. It's similar to that of a horizontal card, but allows you to update the image positioning.

Title

Paragraph

Cutline

Home

Subcategory banner

This is a banner

Title

Paragraph

Home

content Picker

3 Block Banner

Show 3 featured content items at once using this header on the home page or landing pages. You have the ability to update the theme picker for each content item and can toggle whether or not you want the whole block to be clickable or to display a UI button.

Content Component

Product Info

This allows you to showcase a number of items, but is typically used on the home page to display the latest products. You can add a max of 8 items that each include an image of your choice, a subheader, and button.

content Picker

BLog

Use this picker to add articles to your blog. This can only be used on the blog page.

Rubbermaid Commercial Launches Blog
Why Sanitary Surfaces Are Needed In Aged Care
How To Improve Cleaning Standards In Hotel Housekeeping

Content Picker

Featured resources

This picker allows you to add a max of 3 resources to a page, typically at the bottom. Perfect to show related resources on facility pages, brand pages, landing pages, or even product detail pages.

Custom content

Code Block

This code block allows you to add custom html anywhere on your site!

Hi there! This is a header.

“Brand consistency is the pattern of expression that affects what people think about your company. The more consistent your messaging, the more consistent your branding — whether via words, design, offerings or perspective. Your brand should build awareness and develop trust and loyalty with customers.”

We start every project with research. It’s important to us that we reach out the right people to understand the entire business organization’s needs and that we have a clear definition of the problems at hand. Over the course of several interviews it was important that we were able to simply and clearly communicate who the company is and the clear value of their unique solution. Not only did the site need a visual refresh, their marketing communications needed to be revamped as well. In tandem with our efforts on the site, marketing was in the middle of restructuring how they presented, communicated and sold their products. Alignment and coordination with multiple teams was vital to our success.

We start every project with research. It’s important to us that we reach out the right people to understand the entire business organization’s needs and that we have a clear definition of the problems at hand. Over the course of several interviews it was important that we were able to simply and clearly communicate who the company is and the clear value of their unique solution. Not only did the site need a visual refresh, their marketing communications needed to be revamped as well. In tandem with our efforts on the site, marketing was in the middle of restructuring how they presented, communicated and sold their products. Alignment and coordination with multiple teams was vital to our success.

Page Layouts

Breadcrumbs

Add breadcrumbs to your page to breadcrumbs is uses as a navigational aid and help improve the findability of website sections and pages.

There aren't any config options with the breadcrumb crumb component, but are typically found at the top of the page just under the main navigation and sometimes under a banner carousel or featured content header.

Page Layouts

Spacer

There are a variety of spacer sizes (xs, s, m, l, xl) to choose from to use throughout your stacked content pages. Spacers are critical to break up content and make it more easily digestable.

Extra Small Spacer (1-2rem) div class="spacer -xs"

Small Spacer (2-4rem) div class="spacer -s"

Medium Spacer (4-6rem) div class="spacer -m"

Large Spacer (6-8rem) div class="spacer -l"

Extra Large Spacer (8-10rem) div class="spacer -xl"

Content Picker

Featured Products

This featured product picker allows you to pick multiple products or variants (10+) and gives you two views on the front end. It automatically rolls up the product image on the grid view and the list view gives you all the variant information. This can be used on facility pages, brand pages, or landing pages.

Content Component

Hotspots

This component allows you to add interactive hotspots to an image that opens a modal with additional information about the product. This works well for brand pages or facility pages. 

Add your main image, and click where you want the hotspots to show. Then you can edit each hotspot with the RTE functionality built in to the component.

Interactive image - click the dots to view features

Brute Contatiners

Guaranteed to never fade, crack, warp, rust or dent

Learn More

Content Component

Tabs

This component allows you to add an image and descriptive text per tab along with a thumbnail image. There are two color themes associated with this component, one more specific to the Decorative Refuse brand.

Subtitle

Title

dfjkhskdlfhsd;klfj;ljksdfkjlsdkjfksd

Home

Another Tab

Another Tab

Testing

Subtitle

Another Tab

Subtitle

Title

dfjkhskdlfhsd;klfj;ljksdfkjlsdkjfksd

Home

Another Tab

Another Tab

Testing

Subtitle

Another Tab

Content Component

Video

Embed any video on a page by copying the embed code from the YouTube link.

>