Photo: Paul Souders

Style Guide

This is the Body field,

It appears above any paragrphs. In general, you should use Paragraphs to organize any page that is more complex than text.

This text is above an HR


This text is below an HR

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This image is left aligned with a long caption that will wrap onto the next line

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. 

This image is right-aligned

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. 

This image is centered

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. 

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. 

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

 

This is the end of the Body field, Paragraphs follow


 

First accordion fold

Rich text under the first accordion

Second accordion fold

Some rich text in the second accordion fold

(This is the first column in a column set)

Oh, to have been a rider then. Because after the finish all the suffering turns to memories of pleasure, and the greater the suffering, the greater the pleasure. That is Nature's payback to riders for the homage they pay her by suffering.

(this is the second column in a column set)

Velvet pillows, safari parks, sunglasses: people have become wooly mice. They still have bodies that can walk for five days and four nights through a desert of snow, without food, but they accept praise for having taken a one-hour bicycle ride. 'Good for you.'

(this is the third column in a column set)

Instead of expressing their gratitude for the rain by getting wet, people walk around with umbrellas. Nature is an old lady with few suitors these days, and those who wish to make use of her charms she rewards passionately.

Full length pullquote.

Apparently it has a full rich text field, including, confusingly, blockquotes:

Oh, to have been a rider then. Because after the finish all the suffering turns to memories of pleasure, and the greater the suffering, the greater the pleasure. That is Nature's payback to riders for the homage they pay her by suffering. Velvet pillows, safari parks, sunglasses: people have become wooly mice. They still have bodies that can walk for five days and four nights through a desert of snow, without food, but they accept praise for having taken a one-hour bicycle ride. 'Good for you.' Instead of expressing their gratitude for the rain by getting wet, people walk around with umbrellas. Nature is an old lady with few suitors these days, and those who wish to make use of her charms she rewards passionately.

Oh to have been a rider then
Tim Krabbé, the Rider
This is the caption that appears alongside an image with a caption.

This is a rich text field just like the one in the node body 

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

This is a rich text field with a pullquote

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

This is the very important pullquote!

This is one last Rich text paragraph. Everything below here is hardcoded into the Drupal template for this page only


 

Heading Level 1: Page title

Heading Level 2: Page subhead, section headers

Heading Level 3: Block headers

Heading Level 4: Subsection & para headers

Heading Level 5: Usage ???
Heading Level 6: Bylines

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

This is a text link. This is a visited text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Checkbox
Radio

Button Hot button Cool Button Warning Button Success Button Clear Button

Color primitives

dark-blue
light-blue
red
yellow-orange
green

Gray primitives

black
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
gray-8
gray-9
gray-95
white

Color abstractions

background-color
body-color
sottovoce
hushed
whisper
silent
emphasis
cool
danger
warning
success
info
highlight
hero

Stay connected with us, sign up for our newsletter!