Style Guide
Colors
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum Emphasis dolor sit amet, inline link adipiscing elit, Strong sed diam nonummy nibh euismod tincidunt ut laoreet Strike dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
This is a blockquote
Rich Text Editor
These styles are unique to the typography inside of the Rich Content fields.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Unordered List
- List Item 1
- List Item 2
- List Item 3
Ordered List
- List Item 1
- List Item 2
-
List Item 3
- List Item Nested
Typography Styles & Spacing
This section displays the spacing for typography.
This is a typical usage of the spacing.
A subheadline in this example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At natus sapiente quis nulla. Consectetur aliquid obcaecati hic. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At natus sapiente quis nulla. Consectetur aliquid obcaecati hic.
Paragraph
Heading 1
Paragraph
Heading 2
Paragraph
Heading 3
Paragraph
Heading 4
Paragraph
Heading 5
Paragraph
Heading 6
Heading 1
Paragraph
Heading 1
Heading 1
Heading 1
Heading 2
Heading 1
Heading 3
Heading 1
Heading 4
Heading 1
Heading 5
Heading 1
Heading 6
Heading 2
Paragraph
Heading 2
Heading 1
Heading 2
Heading 2
Heading 2
Heading 3
Heading 2
Heading 4
Heading 2
Heading 5
Heading 2
Heading 6
Heading 3
Paragraph
Heading 3
Heading 1
Heading 3
Heading 2
Heading 3
Heading 3
Heading 3
Heading 4
Heading 3
Heading 5
Heading 3
Heading 6
Heading 4
Paragraph
Heading 4
Heading 1
Heading 4
Heading 2
Heading 4
Heading 3
Heading 4
Heading 4
Heading 4
Heading 5
Heading 4
Heading 6
Heading 5
Paragraph
Heading 5
Heading 1
Heading 5
Heading 2
Heading 5
Heading 3
Heading 5
Heading 4
Heading 5
Heading 5
Heading 5
Heading 6
Heading 6
Paragraph
Heading 6
Heading 1
Heading 6
Heading 2
Heading 6
Heading 3
Heading 6
Heading 4
Heading 6
Heading 5
Heading 6
Heading 6
Buttons & Links
Primary Buttons
Secondary Buttons
Buttons on Medium Background
Icons
Forms
Floating labels
Invisible labels
Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen
readers. Use the placeholder attribute as your visible label.
Note: The placeholder attribute only works in IE10+, so invisible labels are
disabled in IE9 and below.