Ci logo

User Experience

Global Components

This sections contains details for our headers, footers and navigation.

Full Header with Mega Menu

Our full header is used on the homepage and content sections, such as Product Catalog and About Us. This is the most common header on the site and allows users easy, quick navigation across the site through the mega menu drop downs for each major section of the site. A demo of our responsive version of this header type can be viewed on this demo page.

A large portion of our site, including the homepage, still uses the fixed width version of this header. The responsive version was designed to match the fixed width version in layout and styling at our lg and xl breakpoint ranges and collapse the menu into an off-canvas reveal panel at the sm and md breakpoint ranges. The menu items in the off-canvas menu mirrors the navigation of the mega menu panels.

Simple Header

Our simple header should be used for workflows and forms where we want users to be focused on completing the task presented to them and our full site navigation would distract from the process. In StyleBitz, this header is responsive and displays the CustomInk logo. At our large and extra large breakpoint ranges (desktop), it includes TTARP information by default. In some use cases, such as with Group Order Form where At our small and medium breakpoint ranges (mobile and tablet), TTARP information is hidden. A demo of the responsive version of this header type can be viewed on this demo page.

A large portion of our site still used the fixed width version of this header type.

Other Headers

The following additional headers exist on our site, but are not in StyleBitz or responsive.

Our full footer is used on the homepage and content sections, such as the Product Catalog and About Us. This is the most common footer on the site and includes TTARP information, a variety of navigation links, newsletter sign up, social media links, SEO links, etc. A demo of our responsive version of this footer type can be viewed on this demo page.

A large portion of our site, including the homepage, still uses the fixed width version of this footer. The responsive version was designed to match the fixed width version in layout and styling at our lg and xl breakpoint ranges and collapse to show a reduced amount of content - TTARP information, social media links and newsletter sign-up - at the sm and md breakpoint ranges (mobile/tablet).

Our simple footer should be used for workflows and forms where we want users to be focused on completing the task presented to them and our full footer would distract from the process. In StyleBitz, this footer is responsive and displays primarly TTARP information. At our sm and md breakpoints the simple footer is designed to match the sm and md breakpoints for the full footer, but with social media and newsletter sign-up content hidden. At our lg and xl breakpoints, the footer is significantly simpler than the full footer but uses the same TTARP content. A demo of the responsive version of this footer type can be viewed on this demo page.

In some use cases, such as for GOF participants, even the TTARP content is hidden so only the legal copy at the very bottom is displayed. This variation should be used sparingly and only when we do not want the user to contact our customer service but rather their group organizer.

Other Footers

The following additional footers exist on our site, but are note in StyleBitz or responsive.