Style Guide

Common styles & elements in the Links template.

Colors

Primary

Secondary

Body Text

Borders

Typography

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Note: You can use classes H1, H2, H3 & H4 to match the respective global style sizing for any text element.

I'm a paragraph! Lorem ipsum dolor sit amet, consectetur adipiscing elit.

I'm a Block Quote! Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body text Body Link

Italic text

Bold text

Large text Large Link

Small text Small Link

Extra small text Extra small Link

Serif font (to match headings)

Sans serif font (to match body text)

Badge Text

Rich Text Block

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.

Thing one
Thing two

Thing one
Thing two

Links Layout 1 Mocked up on an iPhone — A caption to your photo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons

Button Button Small Button Secondary Button Secondary Small

Badge

Spacing

Margin Bottom Extra Small (4px)

Margin Bottom Small (16px)

Margin Bottom Medium (24px)

Margin Bottom Large (32px)

Margin Bottom xL (48px)

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Link hover classes

Link Hover Border Left Link Hover Border Bottom Link Hover Background Slide Up Link Hover Button

Icons

All logos are trademarked to their respective companies.

Social Icons

All logos are trademarked to their respective companies.