Sample Style Guide
This is an example of a style guide sub page.
Colors
- #888 Brand
- #333 Text
- #036 Links
- #003 Link Hovers
- #ddd Hero BG
Typography
Headings
This is a Heading 1
This is a Heading 2
This is a Heading 3
This is a Heading 4
This is a Heading 5
This is a Heading 6
Paragraphs
This is a default paragraph. Here is bold text and italic text. Here is a text link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut fringilla ipsum, sed bibendum augue. Nullam euismod nec mauris elementum porta. Sed varius nisl eu lobortis fringilla. Morbi id elit sollicitudin, venenatis lacus id, cursus quam. Aliquam mollis orci vel enim fermentum adipiscing. Duis facilisis lorem a nulla porttitor sagittis.
Suspendisse pulvinar bibendum laoreet. Suspendisse eget dignissim risus. Cras eget sodales enim. Phasellus accumsan dui metus, quis vulputate turpis congue at. Praesent rutrum consequat rhoncus. Maecenas adipiscing justo vitae massa porta pretium. In egestas orci vehicula, tempus lorem ut, facilisis metus.
Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum sed tortor vitae, suscipit congue massa. Curabitur tempor arcu eget leo placerat, a porta augue pharetra. Nulla velit nibh, laoreet at hendrerit sit amet, adipiscing eget dolor.
Full-Width Paragraphs
This is a full-width paragraph, which is not the default. Default paragraphs have a max-width in
order to limit the number of characters per line for good horizontal measure. However, if needed,
you can remove the max-width with a class="full-width" helper class on any paragraph.
Lorem ipsum dolor
sit
amet, consectetur adipiscing elit. Duis ut
fringilla ipsum, sed bibendum augue. Nullam euismod nec mauris
elementum porta. Sed varius nisl eu lobortis fringilla. Morbi id
elit sollicitudin, venenatis lacus id, cursus quam. Aliquam mollis
orci vel enim fermentum adipiscing. Duis facilisis lorem a nulla
porttitor sagittis.
Lists
Unordered List:
- List Item
- List Item
-
Nested Unordered List:
- List Item
- List Item
-
Nested Ordered List:
- List Item
- List Item
- List Item
- List Item
Ordered List:
- List Item
- List Item
-
Nested Unordered List:
- List Item
- List Item
-
Nested Ordered List:
- List Item
- List Item
- List Item
- List Item
Block Quotes
This is a blockquote. Donec sed rhoncus massa. Suspendisse rutrum viverra felis. Vestibulum augue lacus, ullamcorper non suscipit nec, ornare et mauris. Proin mattis fermentum nibh quis gravida. Citation Source
Buttons
Default Link Button Alt Link ButtonResponsive Media
Responsive Images:
Responsive Videos:
Layout
Grid System
One Whole Column
One-half Column
One-half Column
One-third Column
One-third Column
One-third Column
One-third Column
Two-thirds Column
One-fourth Column
One-fourth Column
One-fourth Column
One-fourth Column
Three-Fourths Column Pushed
Two-thirds Column Pushed
One-third Column Centered
One-half Column Centered
Two-thirds Column Centered
Grid System Outside of a Container
One Whole Column
One-half Column
One-half Column
One-third Column
One-third Column
One-third Column
One-third Column
Two-thirds Column
One-fourth Column
One-fourth Column
One-fourth Column
One-fourth Column
Three-Fourths Column Pushed
Two-thirds Column Pushed
One-third Column Centered
One-half Column Centered
Two-thirds Column Centered
Section w/ a Light Color Background
Heading 2
This is a blockquote. Donec sed rhoncus massa. Suspendisse rutrum viverra felis. Vestibulum augue lacus, ullamcorper non suscipit nec, ornare et mauris. Proin mattis fermentum nibh quis gravida. Citation Source
Section w/ a Dark Color Background
Heading 2
This is a blockquote. Donec sed rhoncus massa. Suspendisse rutrum viverra felis. Vestibulum augue lacus, ullamcorper non suscipit nec, ornare et mauris. Proin mattis fermentum nibh quis gravida. Citation Source
Grid List of Media Objects w/ Thumb Images
Two-column List (e.g. Features) Section
Heading 4
Lorem ipsum dolor sit amet consectetur
Heading 4
Lorem ipsum dolor sit amet consectetur
Heading 4
Lorem ipsum dolor sit amet consectetur
Heading 4
Lorem ipsum dolor sit amet consectetur
Heading 4
Lorem ipsum dolor sit amet consectetur
Heading 4
Lorem ipsum dolor sit amet consectetur
Heading 4
Lorem ipsum dolor sit amet consectetur
Heading 4
Lorem ipsum dolor sit amet consectetur