Typography

Headings

First-level headings are marked up using ‹h1› tags.

Typeface: Source Sans Pro

Heading level one

The heading above is a first-level, heading one that may be used for page titles as well as titles in sectioning elements including ‹body›, ‹section› and ‹article›.

Second-level headings are marked up using ‹h2› tags.

Typeface: Source Sans Pro

Heading level two

The heading above is a second-level, heading two. You may use more than once to create a document, section or article outline.

Third-level headings are marked up using ‹h3› tags.

Typeface: Source Sans Pro

Heading level three

The heading above is a third-level, heading three. You may use more than once to create a document, section or article outline.

Fourth, fifth and sixth level headings are marked up using ‹h4› ‹h5› ‹h6› tags.

Typeface: Source Sans Pro

Heading 4

Heading 5
Heading 6

The headings above are a fourth, fifth and sixth level, headings four, five and six. Use to create a document, section or article outline.

Paragraphs

Unclassified paragraph

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'

Lead paragraph

An additional lead class alters a paragraph’s presentation.

There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and the talking over its head. `Very uncomfortable for the Dormouse,' thought Alice; `only, as it's asleep, I suppose it doesn't mind.'

Secondary paragraph

An additional secondary class alters a paragraph’s presentation.

There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and the talking over its head. `Very uncomfortable for the Dormouse,' thought Alice; `only, as it's asleep, I suppose it doesn't mind.'

Tertiary paragraph

An additional tertiary class alters a paragraph’s presentation.

There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and the talking over its head. `Very uncomfortable for the Dormouse,' thought Alice; `only, as it's asleep, I suppose it doesn't mind.'

Quotations

Block quotes are marked up using ‹blockquote› tags. You may use an optional ‹cite› element to cite an attribution.

“I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!”

Lewis Carroll, Alice in Wonderland

An additional pull-right class alters a block quote’s presentation.

“Why, sometimes I've believed as many as six impossible things before breakfast.”

Lewis Carroll, Alice in Wonderland

An additional testimonial class alters a block quote’s presentation. This style was designed to be used for user testimonials on the site.

“I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!”

Lewis Carroll, Alice in Wonderland

Lists

There are several types of HTML list. List items are marked up using ‹li›.

  • None
  • Disc
  • Circle
  • Square
  • Decimal
  • Decimal leading zero
  • Upper roman
  • Lower greek
  • Lower alpha
  • Upper alpha
  • Armenian
  • Georgian

Unordered list

Unordered lists are marked up using ‹ul› tags. An unordered list describes a collection of items.

  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item

Nested unordered list

  • Unordered list item
    • Nested unordered list item
    • Nested unordered list item
    • Nested unordered list item
  • Unordered list item

An additional inline class alters a list’s presentation.

  • Inline list item
  • Inline list item
  • Inline list item

Ordered list

Ordered lists are marked up using ‹ol› tags. An ordered list may have various numbering schemes presented through CSS.

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
  6. Ordered list item

Nested ordered list

  1. Ordered list item
    1. Nested ordered list item
    2. Nested ordered list item
    3. Nested ordered list item
  2. Ordered list item

Definition list

A definition list ‹dl› consists of pairs of definition terms ‹dt› and definition descriptions ‹dd›.

Cheshire Cat
The Cheshire Cat (/ˈtʃɛʃər/ or /ˈtʃɛʃɪər/) is a fictional cat popularised by Lewis Carroll in Alice's Adventures in Wonderland and known for its distinctive mischievous grin.

Horizontal definition list

An additional dl-horizontal class alters a definition list’s presentation.

Cheshire Cat
The Cheshire Cat (/ˈtʃɛʃər/ or /ˈtʃɛʃɪər/) is a fictional cat popularised by Lewis Carroll in Alice's Adventures in Wonderland and known for its distinctive mischievous grin.

Text Level Elements

Text level HTML elements may be used within other elements. They include: em and strong for semantic emphasis, i and b for presentation formatting, abbr abbreviations, cite citations, code example, del, ins for visibly deleted and inserted content, dfn definitions, mark for highlighted passages and sup superscript and sub subscript.

Tables

Unclassified table

Tabular data is marked up using ‹table› tags with an additional table class.

Header Header Header
Data Data Data
Data Data Data
Data Data Data

Condensed table

An additional table-condensed class alters the presentation.

Header Header Header
Data Data Data
Data Data Data
Data Data Data

Striped table

An additional table-striped class alters the presentation.

Header Header Header
Data Data Data
Data Data Data
Data Data Data

Bordered table

An additional table-bordered class alters the presentation.

Header Header Header
Data Data Data
Data Data Data
Data Data Data

Bordered and striped table

Additional table-condensed, table-bordered and table-striped classes may be combined.

Header Header Header
Data Data Data
Data Data Data
Data Data Data

Short Codes

Buttons

Standard button

An additional btn class creates a standard button.

Anchor

Primary button

An additional btn-primary class alters the presentation.

Anchor

Secondary button

An additional btn-secondary class alters the presentation.

Anchor

Info button

An additional btn-info class alters the presentation.

Anchor

Success button

An additional btn-success class alters the presentation.

Anchor

Warning button

An additional btn-warning class alters the presentation.

Anchor

Danger button

An additional btn-danger class alters the presentation.

Anchor

Button sizes

Additional btn-xs, btn-sm, and btn-lg classes alters the presentation.

Alerts & Wells

Alerts

All alert units are marked up using ‹div› tags with an additional alert class.

Additional alert-success, alert-info, alert-warning and alert-danger classes alters their presentation.

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, but as a typical standard, we use alert-info as a default, since it is generally the least likely to require action to be taken.

I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!
I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!
I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!
I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!

Wells

All well units are marked up using ‹div› tags with an additional well class.

Adding modifier classes of well-lg and well-sm alters their presentation as well.

I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!
I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!
I wonder if I've been changed in the night. Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!

Social Media Icons

Icon Set

Styles for select social media links have been provided in this theme and requires a few class added to specific markup. To achieve these styles, simply create an unordered list with the class of "social-media-links" ‹ul class="social-media-links" › and add the corresponding social media class to each ‹li›.

The following styles are available by using the corresponding class: ‹li class="facebook" ›, ‹li class="pinterest" ›, ‹li class="linkedin" ›, ‹li class="aanaconnect" ›, ‹li class="twitter" ›, ‹li class="aanachannel" ›

Responsive Media

iframe, object, embed

Styles for making media responsive have been provided in this theme and requires a few class added to specific markup. To achieve these styles, simply create a div with the class of "responsive-video" ‹div class="responsive-video" › and within that another div ‹div class="video-wrap" › with your embed, iframe, of object tag within that.

This extra markup and styles allows for keeping the content within responsive. Note: you will want to make sure to remove any width and height formats, remove allowfullscreen, and make sure frameborder="0" within the tag.

Accordion

Styled Collapse

Markup and styles are provided for creating accordion examples using th collapse plugin. Follow this example, or visit Bootstrap for more information.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Color

Primary

hexcode #321d55

Secondary

hexcode #907bb3

Tertiary

hexcode #ff5f01

Accent

hexcode #f4bd48

Accent 2

hexcode #ff9620