How to Use

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.
This is some text inside of a div block.
This is some text inside of a div block.

Using Units
‍
• Use EM for Padding, Margin, Width, Height, Transforms, & Font Sizes
• Use PX only for things that won't break the design if they don't scale such as border widths & drop-shadow distances
• Use % (optional) for columns inside containers

Scaling
‍
• On tablet and below, change the body font size to PX or higher VW number
• On desktop, the design will scale up seamlessly. It will stop scaling when it reaches the max width of 1440px.
• There is no need to add larger breakpoints

Body All Pages Tag Not Changing Font Size?
‍
• The custom code embed on this page in the global symbol sets a px max width when the screen size reaches 1440px. You can either remove this code all together or change the pixel font size there. If removing the code, also remove the 1440px width set to the containers.

Heading

Heading

Heading

Heading

Heading
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Link

What’s a Rich Text element?

This is a subheading and where it goes in the document flow

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is an h2 heading inside rich text

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!

Static and dynamic content editing

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!

Static and dynamic content editing

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!

Static and dynamic content editing

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!

Static and dynamic content editing

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!

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.

Typography

Headings

Typeface h1/ 5em

IBM PLEX SANS REGULAR

Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Typeface h2 / 4em

IBM PLEX SANS REGULAR

Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Typeface h3 / 3em

IBM PLEX SANS REGULAR

Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Typeface h4 / 1.75em

IBM PLEX SANS REGULAR

Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Typeface h4-medium / 1.75em

IBM PLEX SANS REGULAR

Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Typeface h5-medium / 1.125em
IBM PLEX MONO Abrevations
sdsdsdsdsdsdsdsd
Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Typeface h1

IBM PLEX MONO LOGIC

0123456789
Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Typeface h1

IBM PLEX MONO LOGIC

0123456789
Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.

Body

Typeface
IBM SANS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Note: The body font should be set on the root 'Body (All Pages)' tag.
Paragraph Big (p-big) - 1.2rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph - 1rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph Small (text-small) - 0.8em / 1.4 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ordered List - 1rem / 1.5 / Normal
  1. Example Ordered List
  2. Example Ordered List
Unordered List - 1rem / 1.5 / Normal
  • Example Unordered List
  • Example Unordered List
RICH TEXT BLOCK
‍
Text Link

H2 IBM PLEX SANS

‍

H2 IBM PLEX SANS

‍

H3 IBM PLEX SANS

‍

H4 IBM PLEX SANS

‍

H5 IBM PLEX SANS

‍

paragraph

Static and dynamic content editing

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.

H2 IBM PLEX SANS

‍

H2 IBM PLEX SANS

‍

H3 IBM PLEX SANS

‍

H4 IBM PLEX SANS

‍

H5 IBM PLEX SANS

‍

paragraph

Static and dynamic content editing

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.

RTF EXTRA CONTENT

H2 IBM PLEX SANS

‍

H3 IBM PLEX SANS

‍

H4 IBM PLEX SANS

‍

H5 IBM PLEX SANS

‍

wewew

Static and dynamic content editing

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.

Color

Primary

Blue

Primary Accent Color
#28A745

Color Base

Base Font Color
#212121

Gray

Mid Tone
#AEB0B5

Light Gray

Light Background Color
#F1F1F1

Secondary

Green

#20C788

Red

#ec0004

Yellow

#f7df5b

Buttons

Light Background

DefaultCONTACTSecondary
Default SmallPrimarySecondary

Dark Background

DefaultPrimarySecondary
Default SmallPrimarySecondary

Forms

Light Background

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Dark Background

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Cards

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Getting Started

Columns need to be nested within  a "row" and a direct child of a "container".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined. 

col
col
col
col
col
col
col
col
col
col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

 no-gutters
no-gutters
no-gutters
no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.

col
col
col
col

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

col-lg-1
col-lg-11
col-lg-2
col-lg-10
col-lg-3
col-lg-9
col-lg-4
col-lg-8
col-lg-5
col-lg-7
col-lg-6
col-lg-6
col-lg-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4
col-8
col-6
col-6
col-3
col-2
col-7

Vertical Alignment

Align-Start

To align columns from the top, combine a class of  "align-start" preceded by the class of "row"

align-start
align-start
align-start

Align-Center

To align columns from the center, combine a class of  "align-center" preceded by the class of "row"

align-center
align-center
align-center

Align-End

To align columns from the bottom, combine a class of  "align-end" preceded by the class of "row"

align-end
align-end
align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of  "justify-start" preceded by the by class of "row"

justify-start
justify-start

Justify-Center

To align columns from the right, combine a class of  "justify-center" preceded by the class of "row"

justify-center
justify-center

Justify-End

To align columns from the right, combine a class of  "justify-end" preceded by the class of "row"

justify-end
justify-end

Justify-Between

To evenly space columns between each-other, combine a class of  "justify-between" preceded by the class of "row"

justify-between
justify-between

Justify-Around

To evenly space columns around each-other, combine a class of  "justify-around" preceded by the class of "row"

justify-around
justify-around

Self-Align Columns

To individually self-align columns, combine a class of  "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start
self-center
self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

order-last
order-first

Navigation ↑

This is an example of a basic navigation, and it can be modified as desired to make the brand style or aesthetic.

Footer ↓

This is an example of a basic footer. It can be modified as desired, and the generalconcepts to retain are contact info, reiterated nav links, a logo and copyright.

Interactive

Modal

Open Modal

Accordion

What is the sound a doggy makes?

plus

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What is the sound a doggy makes?

plus

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What is the sound a doggy makes?

plus

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Custom Form Elements

Single Add-a-Field

+ Add Entry– Remove Entry

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'dynamic-preference' class to input-group.
  • Add 'dynamic-preference-1' ID to input-group.
  • Add 'first-preference' ID to the input.
  • Add 'add-preference' ID to the add button.
  • Add 'remove-preference' ID to the remove button.
  • Add 'remove-btn' class to the remove button.
  • A 'remove-btn_show' class should exist to set the remove button to show again.

Multi Add-a-Field

+ Add Entry– Remove Entry

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'dynamic-option' class to input-group_col.
  • Add 'dynamic-option-1' ID to input-group_col.
  • Add 'first-option' ID to the first input.
  • Add 'first-example' ID to the second input.
  • Add 'add-option' ID to the add button.
  • Add 'remove-option' ID to the remove button.
  • Add 'remove-btn' class to the remove button.
  • A 'remove-btn_show' class should exist to set the remove button to show again.

Date Picker

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom CSS and JS in page settings and apply the below:
  • Add 'date' class to the input field.

Step Form w/ Validation

Next
Back

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'tab1' through tabX to each tab menu link.
  • Add 'to_tab1' through to_tabX to each next or back button.
  • Add 'form-step1' through form-stepX to each tab pane.

Custom Card OWL Slider

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

Copy labeled custom CSS and JS in page settings and apply the below:
  • Add 'card-slider_wrapper' class to list wrapper element (or collection list wrapper element).
  • Add 'owl-carousel, owl-theme, and card-slider' classes to the list item (or collection list element).
  • Add 'card-slider_item' to the single card element (or collection item element).
  • Create separate nav wrapper element and add class 'card-slider_nav'.
  • Add 'card-slider_left' ID to the left nav button within the 'card-slider_nav' wrapper.
  • Add 'card-slider_right' ID to the right nav button within the 'card-slider_nav' wrapper.

Custom Card SWIPER Slider

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

fancy gallery SWIPER Slider 1 x

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

swiper 8/4

FRONT LOADER

LOGIC STEM

You can’t beat that classic front load look. The logic stem is a clean and simple front load stem with a shorter 48mm reach and flush topcap recess as per the team’s request. Careful cnc machining reduces weight without sacrificing strength or clamping aera. Includes our “shark tooth clamping” (stc) knurling to make sure your bars aren’t going anywhere even on the biggest of setups.
Available in 22.2mm and 25.4mm (os) clamping to fit all of our handlebars.

SINGLE PRODUCT HERO SECTION

FRONT LOADER

LOGIC STEM

You can’t beat that classic front load look. The logic stem is a clean and simple front load stem with a shorter 48mm reach and flush topcap recess as per the team’s request. Careful cnc machining reduces weight without sacrificing strength or clamping aera. Includes our “shark tooth clamping” (stc) knurling to make sure your bars aren’t going anywhere even on the biggest of setups.
Available in 22.2mm and 25.4mm (os) clamping to fit all of our handlebars.

DETAILS

CATEGORIES SECTION 3 in grid

DOOMSAYER SPROCKET

DOYLE SIGNATURE ssdsadasdasdsd
ddffd

DOOMSAYER SPROCKET

DOYLE SIGNATURE ssdsadasdasdsd
ddffd

DOOMSAYER SPROCKET

DOYLE SIGNATURE ssdsadasdasdsd
ddffd

CATEGORIES SECTION 2 in grid

DOOMSAYER SPROCKET

DOYLE SIGNATURE ssdsadasdasdsd
ddffd

DOOMSAYER SPROCKET

DOYLE SIGNATURE ssdsadasdasdsd
ddffd

CATEGORIES SECTION 2 x

DOOMSAYER SPROCKET

DOYLE SIGNATURE

DOOMSAYER SPROCKET

DOYLE SIGNATURE

Spacing

Margin

mb-1 (margin-bottom: 12px;)
mb-2 (margin-bottom: 28px;)
mb-3 (margin-bottom: 48px;)
m-0 (margin: 0;)
mt-3 (margin-top: 48px;)
mt-2 (margin-top: 28px;)
mt-1 (margin-top: 16px;)

Padding

p-0 (padding: 0;)
pt-0 (padding-top: 0;)
pb-0 (padding-bottom: 0;)

Text

Color

text-primary
text-primary
text-dark
text-gray

Alignment

text-center
text-right
text-left
d-none

Font

font-heading
font-body

Other

Overflow

overflow-hidden
overflow-visible

Display

d-none
d-block
d-flex

Prevent Style Clean Up

modal-close
Add-a-field Unhide
No items found.
No items found.