Typography

Paragraphs

This is a basic paragraph. This is what an inline text link looks like. When you use an abbreviation like UPP, it should look like this.

Vestibulum erat wisi, condimentum sed commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Headers

Headers slowly decrease in size to make hierarchy clearer, like this:

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

Small Header Segments

By inserting a <small> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.

Vestibulum erat wisi, condimentum sed commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Drue Heinz Literature Prize 2018

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Lists

Common lists should look like these:

Unordered List

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Ordered List

  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms

Definition Lists

Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.
The dimensions of height, depth, and width within which all things exist and move.

Quotes

Block quotes and pull quotes should be styled as below, with a footer inside the blockquote element for visible citations.

Melissa Yancy is a brilliant writer. In Dog Years she extracts from modern medicine a metaphoric language to describe the triumphs and disappointments of daily life with enormous empathy.

Anthony Marra

The text within can be wrapped in p elements to accomodate multiple paragraphs.

Yancy’s strength lies in her ability to so thoroughly inhabit her characters that we come to know them better than we may know ourselves. Moments of interiority reveal truths, and they dig deep, allowing us to the see the people beneath their veneers. In just a sentence or two, a story can get at the heart of a character.

Yancy’s strength lies in her ability to so thoroughly inhabit her characters that we come to know them better than we may know ourselves. Moments of interiority reveal truths, and they dig deep, allowing us to the see the people beneath their veneers. In just a sentence or two, a story can get at the heart of a character.

Ploughshares

Tables

Tables should be styled as follows, and can accomodate header cells on the top, side or both.

Table 1

First ColumnSecond ColumnThird Column
Content Goes HereContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes HereContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes HereContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.

Vestibulum erat wisi, condimentum sed commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Table 2

First RowContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.
Second RowContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.
Third RowContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.

Vestibulum erat wisi, condimentum sed commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Table 3

First ColumnSecond Column
First RowContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.
Second RowContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.
Third RowContent Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.

Images

Inline images and their corresponding captions should be styled like this, within a figure element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vestibulum erat wisi, condimentum sed commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Or they can be displayed like this, on their own without a caption.

Vestibulum erat wisi, condimentum sed commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus.

Forms

Common form elements should be styled as follows. Add classes of form-section and form-sub-section to header elements to standardize their appearance.

Personal Information

Please include your area code.

Preferences

Checkboxes

Radio Buttons

Your Message