Website Style Guide

Typography

Headings

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

Typeface: Droid Sans

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: Droid Sans

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: Droid Sans

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: Droid Sans

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

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

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

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!

Color

Primary

rgb (20,37,67)

hexcode #142543

Secondary

rgb (46,83,151)

hexcode #2e5397

Tertiary

rgb (238,242,253)

hexcode #eef2fd

Accent

rgb (137,146,161)

hexcode #8992a1

Accent 2

rgb (214,217,221)

hexcode #d6d9dd

Accent 3

rgb (248,248,248)

hexcode #f8f8f8

Accent 4

rgb (207,214,225)

hexcode #cfd6e1