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
- Cheese (essential)
- Pepperoni
- Bacon
- Normal bacon
- Canadian bacon
- Sausage
- Onions
- 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.
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.
Tables
Tables should be styled as follows, and can accomodate header cells on the top, side or both.
Table 1
| First Column | Second Column | Third Column |
|---|---|---|
| Content Goes Here | Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. |
| Content Goes Here | Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. |
| Content Goes Here | Content Goes Here | This 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 Row | Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. |
|---|---|---|
| Second Row | Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. |
| Third Row | Content Goes Here | This 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 Column | Second Column | |
|---|---|---|
| First Row | Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. |
| Second Row | Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. |
| Third Row | Content Goes Here | This 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.
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.