Marzocchi Motors

Style Guide

Type Styles

Colors

Buttons

primary
button LG button button SM
button Icon LG button Icon button Icon SM
secondary
button LG button button SM
button Icon LG button Icon button Icon SM
outline
button LG button button SM
button Icon LG button Icon button Icon SM
outline-secondary
button LG button button SM
button Icon LG button Icon button Icon SM
white
button LG button button SM
button Icon LG button Icon button Icon SM
outline-white
button LG button button SM
button Icon LG button Icon button Icon SM
link
link LG link link SM
link Icon LG link Icon link Icon SM
link-white
link LG link link SM
link Icon LG link Icon link Icon SM

Icons

Close Icons icon-close.liquid
Hamburger Icons icon-hamburger.liquid
Plus Icons icon-plus.liquid
Play Icon video-play-button.liquid
Header Icons icons.liquid - id: {icon-id}
2
2
Social Icons icons.liquid - id: {icon-id}

Cards

CTA Card card__cta.liquid
A close-up of a silver motorcycle's rear seat and tire, showing fine stitching on the black leather and the word Norton pressed into the material.

Our Solutions

Vivamus non bibendum leo

Learn More
Case Study Card card__case-study.liquid
A close-up of a silver motorcycle's rear seat and tire, showing fine stitching on the black leather and the word Norton pressed into the material.
Maecenas malesuada nisl

The Benchmark For Excellence

Learn More
Category Card card__category.liquid
A close-up of a silver motorcycle's rear seat and tire, showing fine stitching on the black leather and the word Norton pressed into the material.

Category

Tech Card card__tech.liquid
A close-up of a silver motorcycle's rear seat and tire, showing fine stitching on the black leather and the word Norton pressed into the material.

Proprietary Technology

Lorem ipsum dolor sit amet consectetur. Diam nibh in porttitor sed sed id molestie urna maecenas. Consequat tellus mauris hendrerit condimentum laoreet nunc sit mattis.
Learn More
Promo Card Light card__promo.liquid color_scheme: light
A close-up of a silver motorcycle's rear seat and tire, showing fine stitching on the black leather and the word Norton pressed into the material.

Site wide clearout

Lorem ipsum dolor sit amet consectetur
Learn More
Promo Card Dark card__promo.liquid color_scheme: dark
A close-up of a silver motorcycle's rear seat and tire, showing fine stitching on the black leather and the word Norton pressed into the material.

Site wide clearout

Lorem ipsum dolor sit amet consectetur
Learn More

Slider Navigation

Arrows splide.css
primary
primary-outline
primary-white
primary-white-outline
secondary
secondary-white
Progress Bar splide.css
black
white
Pagination Dots splide.css
black
white
Counter splide.css
grey 01/05
white 01/05

Forms

text
email
password
tel
select
textarea
checkbox
radio
search

Tables

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Row 1 / Column 1 Row 1 / Column 2 Row 1 / Column 3 Row 1 / Column 4 Row 1 / Column 5 Row 1 / Column 6
Row 2 / Column 1 Row 2 / Column 2 Row 2 / Column 3 Row 2 / Column 4 Row 2 / Column 5 Row 2 / Column 6
Row 3 / Column 1 Row 3 / Column 2 Row 3 / Column 3 Row 3 / Column 4 Row 3 / Column 5 Row 3 / Column 6
Row 4 / Column 1 Row 4 / Column 2 Row 4 / Column 3 Row 4 / Column 4 Row 4 / Column 5 Row 4 / Column 6
Row 5 / Column 1 Row 5 / Column 2 Row 5 / Column 3 Row 5 / Column 4 Row 5 / Column 5 Row 5 / Column 6
Row 6 / Column 1 Row 6 / Column 2 Row 6 / Column 3 Row 6 / Column 4 Row 6 / Column 5 Row 6 / Column 6

Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper finibus eleifend. Cras mattis enim in dignissim tempor. Quisque urna ipsum, pulvinar nec dolor vitae, faucibus laoreet dolor. Donec in metus blandit, sagittis ante at, pulvinar elit. Pellentesque suscipit lectus vel ipsum vehicula facilisis nec vel nibh. Fusce imperdiet varius augue at tristique. Phasellus porta fringilla mi eu suscipit. Morbi dictum iaculis lacus, et rhoncus metus tincidunt in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper finibus eleifend. Cras mattis enim in dignissim tempor. Quisque urna ipsum, pulvinar nec dolor vitae, faucibus laoreet dolor. Donec in metus blandit, sagittis ante at, pulvinar elit. Pellentesque suscipit lectus vel ipsum vehicula facilisis nec vel nibh. Fusce imperdiet varius augue at tristique. Phasellus porta fringilla mi eu suscipit. Morbi dictum iaculis lacus, et rhoncus metus tincidunt in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper finibus eleifend. Cras mattis enim in dignissim tempor. Quisque urna ipsum, pulvinar nec dolor vitae, faucibus laoreet dolor. Donec in metus blandit, sagittis ante at, pulvinar elit. Pellentesque suscipit lectus vel ipsum vehicula facilisis nec vel nibh. Fusce imperdiet varius augue at tristique. Phasellus porta fringilla mi eu suscipit. Morbi dictum iaculis lacus, et rhoncus metus tincidunt in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper finibus eleifend. Cras mattis enim in dignissim tempor. Quisque urna ipsum, pulvinar nec dolor vitae, faucibus laoreet dolor. Donec in metus blandit, sagittis ante at, pulvinar elit. Pellentesque suscipit lectus vel ipsum vehicula facilisis nec vel nibh. Fusce imperdiet varius augue at tristique. Phasellus porta fringilla mi eu suscipit. Morbi dictum iaculis lacus, et rhoncus metus tincidunt in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper finibus eleifend. Cras mattis enim in dignissim tempor. Quisque urna ipsum, pulvinar nec dolor vitae, faucibus laoreet dolor. Donec in metus blandit, sagittis ante at, pulvinar elit. Pellentesque suscipit lectus vel ipsum vehicula facilisis nec vel nibh. Fusce imperdiet varius augue at tristique. Phasellus porta fringilla mi eu suscipit. Morbi dictum iaculis lacus, et rhoncus metus tincidunt in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper finibus eleifend. Cras mattis enim in dignissim tempor. Quisque urna ipsum, pulvinar nec dolor vitae, faucibus laoreet dolor. Donec in metus blandit, sagittis ante at, pulvinar elit. Pellentesque suscipit lectus vel ipsum vehicula facilisis nec vel nibh. Fusce imperdiet varius augue at tristique. Phasellus porta fringilla mi eu suscipit. Morbi dictum iaculis lacus, et rhoncus metus tincidunt in.

Containers

Breakout
Breakout right
Breakout left

Grid

12 Column Grid .grid-wrapper-12
Inset
Inset Medium
Inset Tight
24 Column Grid .grid-wrapper-24
Inset
Inset Medium
Inset Tight

Spacing

Section Spacing
.section-padding--[t/b]-xs .section-margin--[t/b]-xs
.section-padding--[t/b]-sm .section-margin--[t/b]-sm
.section-padding--[t/b]-md .section-margin--[t/b]-md
.section-padding--[t/b]-lg .section-margin--[t/b]-lg
.section-padding--[t/b]-xl .section-margin--[t/b]-xl