Display helper classes

Flexbox helper classes

Basic ass display flex
Combo for flex that's display vertical
Combo for flex that's "space between"
Combo for flex that's "space around"
Combo for flex that's "align center"
Combo for flex that's "justify center"
Combo for flex that makes children wrap

Base level elements

This is a blockquote

Components

Buttons

The "base". It's effectively "style-secondary" and "size-medium".

Text Link

Styles

This is style primary

Sizes

This is size-smallThis is size-large

Border buttons

This is size-smallThis is size-smallThis is size-small

Cards

This is a standard card
This is a size-small card

Text helper classes

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.

Color helper classes

Blue

Background
Text
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10

Brown

Background
Text
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900

Neutral

Background
Text
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900

Rich text styles (for blog posts)

This is some paragraph text. Here's some lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum, mi in tincidunt volutpat, neque lorem rhoncus lorem, ut varius dui risus in libero. Cras lobortis blandit luctus. Nunc tincidunt, enim eget hendrerit consectetur, lectus quam varius augue, in suscipit velit purus quis diam. Vivamus malesuada at tellus a mollis. Quisque rutrum tortor ligula, nec finibus felis condimentum quis. Nam id consectetur mi. Etiam id imperdiet lacus.

Phasellus suscipit mauris sit amet metus ultrices maximus. Mauris suscipit dignissim malesuada. Quisque bibendum augue eget tortor commodo imperdiet. Sed quis feugiat ante, non laoreet risus. Quisque ac sem ac magna convallis feugiat. Ut vel orci sit amet enim sagittis hendrerit in sit amet justo. Fusce quis hendrerit ipsum. Morbi vulputate, nulla vitae maximus efficitur, leo arcu ultrices mi, ut auctor urna magna ut lectus.

Ut maximus orci at diam egestas, pretium ornare ex ullamcorper. Nulla pretium risus sed nunc finibus aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras quis sem dapibus, suscipit lorem id, laoreet sem. Etiam mollis quis quam non dictum. Quisque vitae malesuada turpis, ut tincidunt nunc. Vivamus at nibh nec nisl ultrices dignissim. Morbi pharetra volutpat purus ultricies feugiat. Morbi eu magna urna. Praesent tempor leo ac enim hendrerit, non efficitur ligula fringilla.

This is an H1

This is an H2

This is an h3

This is an h4

This is an h5
This is an h6
This is a caption for the image above

Blockquote

“Small business owners and entrepreneurs don’t have time to manage three, four, or five different platforms that each serve one specific purpose, and they don’t want their data all over the place: They need a tool powered by data and expertise that will help them know where to invest their marketing dollars."

Ordered list

  1. Highlighting an existing case study for their core product. Notably, this Simply Gum customer story is from a 2017 campaign promoting Mailchimp’s remarketing automation tooling. The point of including it here isn’t to promote the new product, but to instill confidence in the Mailchimp brand.
  2. Including customer quotes. To supplement a customer case study, Mailchimp secured customer quotes ahead of the release by presumably providing beta access to the new feature ahead of the launch, and trading that access for a short testimonial or quote.

Here's an unordered list