Typography
Headings
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
Example
h1. Heading one example
h1. Title Page
Lead text - Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
h1. Uppercase example
h2. Heading two example
h3. Heading three example
h3. Heading three example (link)
h4. Heading four example
h5. Heading five example
h6. Heading six example
h1. Heading one example
h1. Title Page examplee
h1. Uppercase example
h2. Heading two example
h3. Heading three example
h3. Heading three example (link)
h4. Heading four example
h5. Heading five example
h6. Heading six example
Body Copy
The style guide global default font-size is 16px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of 16px by default.
Example
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
...
Inline Text Elements
Bold
For emphasizing a snippet of text with a heavier font-weight.
Example
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
Italics
For emphasizing a snippet of text with italics.
Example
The following snippet of text is rendered as italicized text.
<em>rendered as italicized</em>Alignment Classes
Easily realign text to components with text alignment classes.
Example
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Transformation Classes
Transform text in components with text capitalization classes.
Example
Lowercased text.
Uppercased text.
Capitalized text.
Lowercased text.
Uppercased text.
Capitalized text.
Blockquote
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
... Lists
Unordered
A list of items in which the order does not explicitly matter.
Example
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
...
Ordered
A list of items in which the order does explicitly matter.
Example
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
...
Quicklinks
Example
Columns
Two Columns
Example
......More Link
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
<a>...</a> <a class="more-link"> ... </a> Three Columns
Example
.........Tables
Basic
Use the standard table code to make tables.
Example
| Column 01 | Column 02 | Column 03 | Column 04 | Column 05 |
|---|---|---|---|---|
| Row 01 | Row 02 | Row 03 | Row 04 | Row 05 |
| Row 01 | Row 02 | Row 03 | Row 04 | Row 05 |
| Row 01 | Row 02 | Row 03 | Row 04 | Row 05 |
| Row 01 | Row 02 | Row 03 | Row 04 | Row 05 |
| Row 01 | Row 02 | Row 03 | Row 04 | Row 05 |
...
Forms
Basic Example
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 50%; by default. Wrap labels and controls in .form-group for optimum spacing.
Example
Buttons
Sizes
The button sizes are large, default, and small.
Example
<!-- Buttons --> <a class="button" href="#">Submit</a> Pagination
Listing
Example
State Agencies Urge Caution During Storm and Flood Cleanup
June 19,2014
Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.
Dark Block
Example
Title
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Tabs
Section I
TAB ONE (1) TEXT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 1 Aliquam tincidunt mauris eu risus.
- 1 Vestibulum auctor dapibus neque.
Section II
TAB TWO (2) TEXT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 2 Aliquam tincidunt mauris eu risus.
- 2 Vestibulum auctor dapibus neque.
Section III
TAB THREE (3) TEXT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 3 Aliquam tincidunt mauris eu risus.
- 3 Vestibulum auctor dapibus neque.
Open: Section I, Section II, or Section III