Go Back Up

Style Guide

This is a template designed to demonstrate the site's global settings set within the Theme Settings. The following sections will showcase the global text, buttons, and form styling as well the modules and sections available in the theme.

This Style Guide template should NOT be used for creating a page.

Typography

H1: The Quick Brown Fox Jumps Over The Lazy Dog.

H2: The Quick Brown Fox Jumps Over The Lazy Dog.

H3: The Quick Brown Fox Jumps Over The Lazy Dog.

H4: The Quick Brown Fox Jumps Over The Lazy Dog.

H5: The Quick Brown Fox Jumps Over The Lazy Dog.
H6: The Quick Brown Fox Jumps Over The Lazy Dog.

Subeadline: The Quick Brown Fox Jumps Over The Lazy Dog.

Eyebrow: The Quick Brown Fox Jumps Over The Lazy Dog.

Body: The Quick Brown Fox Jumps Over The Lazy Dog.

Link: The Quick Brown Fox Jumps Over The Lazy Dog.

Base Background

A Drag-and-Drop CMS Hub Theme Built for Retail

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula Sollicitudin elit.

  • Impressive Feature
  • Impressive Feature
  • Impressive Feature
  • Impressive Feature

Dark Background

A Drag-and-Drop CMS Hub Theme Built for Retail

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula Sollicitudin elit.

  • Impressive Feature
  • Impressive Feature
  • Impressive Feature
  • Impressive Feature

Theme Modules

The following are all the modules available in this theme. This does not include modules that do not themselves render any visible content (ex: Transparent Header, Schema, Social SEO, etc) or are only available in specific template types (ex: Blog Author, Blog Listing, Blog Post Hero, etc).

Call to Action Box

A styled box that includes call to action text and button.

CTA HEADLINE LOREM IPSUM

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

Collapsible Text

List of collapsible items for condensing content.

FAQ Eyebrow

FAQ Headline Goes Here

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

Lorem ipsum dolor sit amet consectetuer elit?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Aliquam tincidunt mauris eu risus?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Lorem ipsum dolor sit amet consectetuer elit?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Aliquam tincidunt mauris eu risus?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Eyebrow Nav

Minimal navigational menu, for use above the main header, that includes optional phone/email links, language switcher, and announcement.
0% Financing for 18 months on orders over $1,000! Shop Now

Feature Items

A set of items such as benefits, services, etc. that can include an icon, text, and/or button.

Hero - Background Video

A hero with a video for a background with full width content options of text, image, form, and popup video. Set this module's section's Content Alignment to Full Width

Flexible drag-and-drop website builder

An adventurous
e-commerce theme

Image Slider

A multi-slide slider with images and captions to highlight information. Set this module's section's Content Alignment to Full Width
Caption Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

Caption Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

Caption Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

Caption Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

Caption Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

Logos

A row of logos. Can be turned into a slider by setting a number in the layout's "Number of logos to show at a time" field that is lower than the number of logos you upload.

FEATURED BRANDS

  • Traverse
  • Traverse
  • Traverse
  • Traverse
  • Traverse
  • Traverse
  • Traverse
  • Traverse
  • Traverse
  • Traverse
  • Product Listing

    Filterable and searchable listing of products or resources.

    Product Nav Grid

    A grid of navigational items with image, text, and button.

    Road

    Road

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Dirt

    Dirt

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Water

    Water

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Snow

    Snow

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Product Search

    Stand alone search box to link to a product listing page.

    Products Slider

    A slider of products and descriptions with optionable filter.

    Related Products

    Reviews Slider

    Two column section with a header and a slider of reviews with image and boxed in quote. Set this module's section's Content Alignment to Full Width

    About Taverse

    Create Flexible Website Content With Traverse

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    We Have Happy Buyers

    "Lorem ipsum dolor sit amet, et erat elit dolor consectetuer adipiscing elit. Phasellus sit et amet hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus."

    Buyers Love Our Products

    "Lorem ipsum dolor sit amet, et erat elit dolor consectetuer adipiscing elit. Phasellus sit et amet hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus."

    We Have Happy Buyers

    "Lorem ipsum dolor sit amet, et erat elit dolor consectetuer adipiscing elit. Phasellus sit et amet hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus."

    Site Search Form

    Adds a search form that leads to the domain's site results page.

    Social Follow

    Icon links to social media pages.

    Social Sharing

    Icon links to share page to social media.

    Tabbed Content

    Tabular content that can contain contain rows and columns of text, image, video, form, or icon list.

    product Details

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

    • Lorem ipsum dolor sit amet, consectetuer elit

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit et erat. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel.

    • Lorem ipsum dolor sit amet, consectetuer elit

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit et erat. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel.

    • Lorem ipsum dolor sit amet, consectetuer elit

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit et erat. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel.

    About Product

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aenean dignissim pellentesque felis.

    • Lorem ipsum dolor sit amet, consectetuer elit

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit et erat. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel.

    • Lorem ipsum dolor sit amet, consectetuer elit

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit et erat. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel.

    • Lorem ipsum dolor sit amet, consectetuer elit

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit et erat. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel.

    Team Listing

    List out team members with their name, title, social links, and profile image.

    Team Eyebrow

    Team Headline Goes Here

    Lorem ipsum dolor sit amet, phasellus consectetuer adipiscing aliquet elit.

    Name Name

    Title

    Name Name

    Title

    Name Name

    Title

    Name Name

    Title

    Name Name

    Title

    Name Name

    Title

    Text and Image Columns

    Quickly create two columns with text and an image.

    FEATURED PRODUCT

    A Drag-and-Drop CMS Hub Theme Built for Retail

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula Sollicitudin elit.

    • Impressive Feature
    • Impressive Feature
    • Impressive Feature
    • Impressive Feature

    Theme Buttons

    Easily add theme styled buttons.

    Theme Form

    A form module with extra options not available in HubSpot's default module.

    Get In Touch

    Theme Image

    An image module with extra styling options not available in HubSpot's default module.

    Theme Rich Text

    A rich text module with extra styling options not available in HubSpot's default module.

    FEATURED PRODUCT

    A Drag-and-Drop CMS Hub Theme Built for Retail

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula Sollicitudin elit.

    • Impressive Feature
    • Impressive Feature
    • Impressive Feature
    • Impressive Feature

    Two Tone Section

    Two columns meant to span the entire width of a section that includes text and an image with left or right placement. Set this module's section's Content Alignment to Full Width

    About Product

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Pellentesque aliquet nibh nec urna.
    • Sed pretium, ligula sollicitudin erat laoreet viverra, tortor.

    Two Tone Slider

    Two column slider, meant to span the entire width of a section, with image in one column and text in the other. Set this module's section's Content Alignment to Full Width

    About Traverse

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Pellentesque aliquet nibh nec urna.
    • Sed pretium, ligula sollicitudin erat laoreet viverra, tortor.

    About Traverse

    Aliquam Tincidunt Mauris eu Risus

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Pellentesque aliquet nibh nec urna.
    • Sed pretium, ligula sollicitudin erat laoreet viverra, tortor.

    About Traverse

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Pellentesque aliquet nibh nec urna.
    • Sed pretium, ligula sollicitudin erat laoreet viverra, tortor.

    About Traverse

    Aliquam Tincidunt Mauris eu Risus

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Pellentesque aliquet nibh nec urna.
    • Sed pretium, ligula sollicitudin erat laoreet viverra, tortor.

    Theme Sections

    The following are all the saved sections available in this theme (except for those specific to blogs).

    FAQ - Left Header

    Frequently asked questions with a left side header.

    FAQ Eyebrow

    FAQ Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

    Lorem ipsum dolor sit amet consectetuer elit?

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

    Aliquam tincidunt mauris eu risus?

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue?

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

    Integer vitae libero ac risus egestas placerat?

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

    About Product

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    Hero - COntact

    A hero with contact information and a form that overlaps the section below it.

    Contact Eyebrow

    Contact Headline

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero.

    Get In Touch

    Hero - Simple

    A hero with backround and centered text.

    Product Listing Eyebrow

    PRODUCT LISTING HEADLINE

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.

    Product Eyebrow

    PRODUCT LOREM IPSUM DOLOR SIT

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo.

    • Impressive Feature
    • Impressive Feature
    • Impressive Feature
    • Impressive Feature

    Product Navigation

    A navigation grid displaying product type links that overlaps the section above it.

    Road

    Road

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Dirt

    Dirt

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Water

    Water

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Snow

    Snow

    Lorem ipsum dolor sit amet, dolor erat consectetuer adipiscing elit. Phasellus Hendrerit erat lorem.

    Subscription Form Box

    A boxed-in single line form to get users to subcribe.

    STAY UPDATED

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Tabbed Content - Vertical

    A tabbed content module with vertical tab styling.

    product Details

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    Two Tone Section - Image Right

    Two Tone Section module with image set to the right of the text.

    About Traverse

    Lorem Ipsum Headline Goes Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin erat laoreet viverra, tortor libero sodales leo.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Pellentesque aliquet nibh nec urna.
    • Sed pretium, ligula sollicitudin erat laoreet viverra, tortor.