Welcome to Amplemarket's Marketing Website Style Guide

This style guide will help to ensure a continuous brand experience around the website. It means that no matter how, when or where a customer experiences a brand, they are experiencing the same underlying traits. It's this consistency across every touch-point that helps build a brand and brand loyalty.

Typography

h-xxx-large

The quick brown fox jumps over

h-xx-large

The quick brown fox jumps over

h-x-large

The quick brown fox jumps over

h-large

The quick brown fox jumps over

h-medium-bold

The quick brown fox jumps over

h-medium-regular

The quick brown fox jumps over

h-small

The quick brown fox jumps over

p-big

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.

p-medium

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.

p-small

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.

Buttons

Colors

color-background
color-text
This is some text for the color-text class.
This is some text for the color-text class.
This is some text for the color-text class.
This is some text for the color-text class.
This is some text for the color-text class.
This is some text for the color-text class.

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich text

This is a rich-text H1 style

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 a rich-text H2 style

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!

This is a list:

  • List item
  • List item
  • List item

This is another list

  1. List item
  2. List item
This is a quote with multiple lines. 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.

Width

Desktop Width

width-10
width-20
width-30
width-40
width-50
width-60
width-70
width-80
width-90
width-100

Tablet Width

width-tablet-10
width-tablet-20
width-tablet-30
width-tablet-40
width-tablet-50
width-tablet-60
width-tablet-70
width-tablet-80
width-tablet-90
width-tablet-100

Mobile Width

width-mobile-10
width-mobile-20
width-mobile-30
width-mobile-40
width-mobile-50
width-mobile-60
width-mobile-70
width-mobile-80
width-mobile-90
width-mobile-100

Desktop Spacing

Desktop Margin

Desktop Margin Top

margin-top-xxsmall
margin-top-xsmall
margin-top-small
margin-top-medium
margin-top-large
margin-top-xlarge
margin-top-xxlarge

Desktop Margin Bottom

margin-bottom-xxsmall
margin-bottom-xsmall
margin-bottom-small
margin-bottom-medium
margin-bottom-large
margin-bottom-xlarge
margin-bottom-xxlarge

Desktop Margin Right

margin-right-xxsmall
margin-right-xsmall
margin-right-small
margin-right-medium
margin-right-large
margin-right-xlarge
margin-right-xxlarge

Desktop Margin Left

margin-left-xxsmall
margin-left-xsmall
margin-left-small
margin-left-medium
margin-left-large
margin-left-xlarge
margin-left-xxlarge

Desktop Padding

Desktop Padding Top

padding-top-xxsmall
padding-top-xsmall
padding-top-small
padding-top-medium
padding-top-large
padding-top-xlarge
padding-top-xxlarge

Desktop Padding Bottom

padding-bottom-xxsmall
padding-bottom-xsmall
padding-bottom-small
padding-bottom-medium
padding-bottom-large
padding-bottom-xlarge
padding-bottom-xxlarge

Desktop Padding Right

padding-right-xxsmall
padding-right-xsmall
padding-right-small
padding-right-medium
padding-right-large
padding-right-xlarge
padding-right-xxlarge

Desktop Padding Left

padding-left-xxsmall
padding-left-xsmall
padding-left-small
padding-left-medium
padding-left-large
padding-left-xlarge
padding-left-xxlarge

Tablet Spacing

Tablet Margin

Tablet Margin Top

tablet-margin-top-xxsmall
tablet-margin-top-xsmall
tablet-margin-top-small
tablet-margin-top-medium
tablet-margin-top-large
tablet-margin-top-xlarge
tablet-margin-top-xxlarge

Tablet Margin Bottom

tablet-margin-bottom-xxsmall
tablet-margin-bottom-xsmall
tablet-margin-bottom-small
tablet-margin-bottom-medium
tablet-margin-bottom-large
tablet-margin-bottom-xlarge
tablet-margin-bottom-xxlarge

Tablet Margin Right

tablet-margin-right-xxsmall
tablet-margin-right-xsmall
tablet-margin-right-small
tablet-margin-right-medium
tablet-margin-right-large
tablet-margin-right-xlarge
tablet-margin-right-xxlarge

Tablet Margin Left

tablet-margin-left-xxsmall
tablet-margin-left-xsmall
tablet-margin-left-small
tablet-margin-left-medium
tablet-margin-left-large
tablet-margin-left-xlarge
tablet-margin-left-xxlarge

Tablet Padding

Tablet PaddingTop

tablet-padding-top-xxsmall
tablet-padding-top-xsmall
tablet-padding-top-small
tablet-padding-top-medium
tablet-padding-top-large
tablet-padding-top-xlarge
tablet-padding-top-xxlarge

Tablet Padding Bottom

tablet-padding-bottom-xxsmall
tablet-padding-bottom-xsmall
tablet-padding-bottom-small
tablet-padding-bottom-medium
tablet-padding-bottom-large
tablet-padding-bottom-xlarge
tablet-padding-bottom-xxlarge

Tablet Padding Right

tablet-padding-right-xxsmall
tablet-padding-right-xsmall
tablet-padding-right-small
tablet-padding-right-medium
tablet-padding-right-large
tablet-padding-right-xlarge
tablet-padding-right-xxlarge

Tablet Padding Left

tablet-padding-left-xxsmall
tablet-padding-left-xsmall
tablet-padding-left-small
tablet-padding-left-medium
tablet-padding-left-large
tablet-padding-left-xlarge
tablet-padding-left-xxlarge

Mobile Spacing

Mobile Margin

Mobile Margin Top

mobile-margin-top-xxsmall
mobile-margin-top-xsmall
mobile-margin-top-small
mobile-margin-top-medium
mobile-margin-top-large
mobile-margin-top-xlarge
mobile-margin-top-xxlarge

Mobile Margin Bottom

mobile-margin-bottom-xxsmall
mobile-margin-bottom-xsmall
mobile-margin-bottom-small
mobile-margin-bottom-medium
mobile-margin-bottom-large
mobile-margin-bottom-xlarge
mobile-margin-bottom-xxlarge

Mobile Margin Right

mobile-margin-right-xxsmall
mobile-margin-right-xsmall
mobile-margin-right-small
mobile-margin-right-medium
mobile-margin-right-large
mobile-margin-right-xlarge
mobile-margin-right-xxlarge

Mobile Margin Left

mobile-margin-left-xxsmall
mobile-margin-left-xsmall
mobile-margin-left-small
mobile-margin-left-medium
mobile-margin-left-large
mobile-margin-left-xlarge
mobile-margin-left-xxlarge

Mobile Padding

Mobile Padding Top

mobile-padding-top-xxsmall
mobile-padding-top-xsmall
mobile-padding-top-small
mobile-padding-top-medium
mobile-padding-top-large
mobile-padding-top-xlarge
mobile-padding-top-xxlarge

Mobile Padding Bottom

mobile-padding-bottom-xxsmall
mobile-padding-bottom-xsmall
mobile-padding-bottom-small
mobile-padding-bottom-medium
mobile-padding-bottom-large
mobile-padding-bottom-xlarge
mobile-padding-bottom-xxlarge

Mobile Padding Right

mobile-padding-right-xxsmall
mobile-padding-right-xsmall
mobile-padding-right-small
mobile-padding-right-medium
mobile-padding-right-large
mobile-padding-right-xlarge
mobile-padding-right-xxlarge

Mobile Padding Left

mobile-padding-left-xxsmall
mobile-padding-left-xsmall
mobile-padding-left-small
mobile-padding-left-medium
mobile-padding-left-large
mobile-padding-left-xlarge
mobile-padding-left-xxlarge