Style Guide

Typography

Headings

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

Typeface: Arvo

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: Arvo

Heading level two

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

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

Typeface: Arvo

Heading level three

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

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

Typeface: Helvetica (h4 & h6), Arvo (h5)

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.'

Quotations

Block quotes are marked up using ‹blockquote class="pull-right" › tags. You may use an optional ‹cite› element to cite an attribution.

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

Lewis Carroll, Alice in Wonderland

Lists

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

  • None
  • Disc
  • Square
  • Decimal
  • Decimal leading zero
  • Upper roman
  • Lower alpha
  • Upper alpha

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

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

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 presentational 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

Bordered and striped table

Tabular data is marked up using ‹table› tags with an additional table, table-condensed, table-bordered and table-striped classes.

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

Short Codes

Simple Content Accordion

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.

Bio Example

Naru

Naru Narusegawa Sith Lord

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Carrie

Carrie Thorpe Jedi Knight

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Anthony

Anthony Overkamp Jedi Knight

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Buttons

Standard button

An additional btn class creates a standard button.

Anchor

Primary button

An additional btn-primary class alters the presentation.

Anchor

Info button

An additional btn-info class alters the presentation.

Anchor

Button sizes

Additional btn-xs, btn-sm, btn-lg and btn-large 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!

Color

Primary

rgb (23,50,112)

hexcode #173270

Secondary

rgb (229,229,229)

hexcode #E5E5E5

Accent

rgb (85,85,85)

hexcode #555

Accent 2

rgb (242,242,242)

hexcode #f2f2f2

Accent 3

rgb (248,248,248)

hexcode #f8f8f8