Style Guide

Summary controls the title of detail element

December 2, 2011

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

by Bob Smith

Article and Aside

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Border Box

Float Image to the Left (class="float-left")

State Seal It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Float Image to the Right (class="float-right")

Align Text

Align text to the left (class="align-left")

Align text to the center (class="center")

Align text to the right (class="align-right")

Smaller Text

This is smaller text (class="smaller")

Data Table - Header 2

<p><b>Note:</b> If you find yourself creating a data table, there's a good chance that whatever you're doing would be better handled by creating a content type to hold the data and display it programmatically. Talk to a developer!</p>

My Data Table
column header	column header	column header	column header	column header	column header
row header	this is my data	this is my data	this is my data	this is my data	this is my data
row header	this is my data	this is my data	this is my data	this is my data	this is my data
row header	this is my data	this is my data	this is my data	this is my data	this is my data

Unordered List - Header 3

Use these styles as guides.

Ordered List - Header 3

Definition List - Header 3

Definition Term: definition
Definition Term: definition
Definition Term: definition

Image with PDF link (should be hidden)

Two-Column Content

The container class specifies the number of columns. The elements within the container specify the number of columns that element uses, and includes the "last" class if it is the last column.

<div class="columns-2">
  <p class="col-1">(text)</p>
  <p class="col-1 last">(text)</p>
</div>

Flexitarian butcher yr bicycle rights, tote bag drinking vinegar small batch ethical hella whatever vinyl. Asymmetrical normcore freegan YOLO fingerstache ethical. Yr narwhal hashtag fingerstache vinyl, dreamcatcher Helvetica Portland. Shoreditch keytar hella beard. Wayfarers banjo roof party, farm-to-table locavore +1 3 wolf moon. 90's locavore pickled narwhal sartorial deep v Truffaut next level, letterpress authentic. Master cleanse tattooed sustainable, fixie blog chillwave church-key jean shorts fanny pack fingerstache single-origin coffee mlkshk Tumblr synth cray.

McSweeney's lomo Schlitz plaid jean shorts XOXO Cosby sweater slow-carb, bespoke butcher irony brunch. Hella chia keffiyeh tofu, butcher tousled semiotics. Twee fanny pack Austin fashion axe Tonx leggings. Photo booth cardigan banh mi, you probably haven't heard of them cred bicycle rights Echo Park. Thundercats 3 wolf moon squid drinking vinegar Austin Truffaut, readymade letterpress Brooklyn authentic Tumblr. Kogi messenger bag viral 3 wolf moon. Ethnic disrupt Odd Future, Tumblr readymade tote bag fashion axe post-ironic gastropub pickled.

Three-Column Content

Note that a single element can take up multiple columns by specifying the number of columns in the class.

<div class="columns-3">
  <p class="col-1">(text)</p>
  <p class="col-2 last">(text)</p>
</div>

Banh mi flannel yr, actually jean shorts ugh artisan direct trade ethical. Viral normcore ennui selvage, selfies Pinterest gastropub. Gluten-free dreamcatcher retro, kitsch American Apparel food truck pug +1 Banksy. Ugh twee kale chips, hella PBR&B plaid cornhole Blue Bottle biodiesel.

Craft beer meh church-key cred, sustainable beard Williamsburg Tonx salvia. Slow-carb locavore kitsch actually. Truffaut pop-up VHS, locavore raw denim butcher wolf lo-fi post-ironic hella craft beer skateboard quinoa bitters. High Life put a bird on it iPhone Carles brunch, plaid Bushwick YOLO fixie Intelligentsia chillwave leggings direct trade sustainable. Blog Brooklyn narwhal, authentic wolf sriracha synth Intelligentsia. Butcher Shoreditch mustache, drinking vinegar meh literally pug Cosby sweater. Godard Neutra VHS, fashion axe Tonx church-key chambray fanny pack beard Pinterest semiotics.

Four-Column Content

On this one, we'll make the center column double the width of the side columns.

<div class="columns-4">
  <p class="col-1">(text)</p>
  <p class="col-2">(text)</p>
  <p class="col-1 last">(text)</p>
</div>