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.
This is an example of a themed carousel banner, and this is some paragraph text.
And a cutline if you need it.
Learn More
This is an example of a themed carousel banner, and this is some paragraph text.
And a cutline if you need it.
Learn More This is an example of a themed carousel banner, and this is some paragraph text.
And a cutline if you need it.
Learn More
This is an example of a themed carousel banner, and this is some paragraph text.
And a cutline if you need it.
Learn MoreContent 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.
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.
Themed Stacked Card
Themed Stacked Card
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.
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.
This is a banner
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.
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.
Related Resources
Custom content
Code Block
This code block allows you to add custom html anywhere on your site!
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.
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.
Testing
Subtitle
Another Tab
Testing
Subtitle
Another Tab
Content Component
Video
Embed any video on a page by copying the embed code from the YouTube link.
