Fonts
Roboto
Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.
https://fonts.google.com/specimen/Roboto
EB Garmond
Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.
https://fonts.google.com/specimen/EB+Garamond
Colors
Primary Colors
$blue, $primary
.bg-blue, .bg-primary
#011F5B
$red
.bg-red
#95001A
Secondary Colors
$light_blue
.bg-light_blue
#82AFD3
$orange
.bg-orange
#C35A00
$green
.bg-orange
#008e00
$yellow
.bg-yellow
#F2C100
$purple
.bg-purple
#4A0042
$gray
.bg-gray
#F2F2F2
$gray-light
.bg-gray-light
#F7F7F7
$steel
.bg-steel
#CCCCCC
$slate
.bg-slate
#999999
$coal
.bg-coal
#333333
WYSIWYG
All generic text styling is contained in an element with a class of wysiwyg. Any examples below that do not contain a code block is using standard HTML with no classes. This includs paragraphs, headings, lists with red bullets or numbers.
Headings
H2 Media Breakdown - Lorem ipsum donec id elit non mi porta gravida at eget metus.
H3 List Breakdown - Lorem ipsum donec id elit non mi porta gravida at eget metus.
H4 Tables - Lorem ipsum donec id elit non mi porta
H5 Miscellaneous - Lorem ipsum donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo
H6 Lorem ipsum donec id elit non mi porta gravida at eget metus
Paragraphs and Aligned Images
Intro Text
This paragraph has a class of intro, a class of large will also work, venenatis dapibus posuere velit aliquet. Justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue.
Image Align Right
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Image Align Left
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Figure with Caption, no alignment
Lists
The examples below use the standard HTML lists with red being the default ::marker color. To have blue bullets and numbers add a class of list-blue to the <ul> or <ol>
Default lists with no classes
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt
- Quantum Nullarim Siempre
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt
- Diam eirmod tempor fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- Quantum Nullarim Siempre
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Blue lists with a class of .list-blue
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt
- Quantum Nullarim Siempre
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt
- Diam eirmod tempor fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- Quantum Nullarim Siempre
- Lorem ipsum dolor sit amet onsetetur
- Diam nonumy eirmod invidunt nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Tables
Table with <th> in the <thead>
| Lorem | Amet | Malesuada Nibh Euismod Dolor Sit |
|---|---|---|
| 07/01/2019 | 4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mattis consectetur purus sit amet fermentum. |
| 07/01/2019 | 4 | Etiam porta sem malesuada magna mollis euismod. |
| 07/01/2019 | 4 | Maecenas sed diam eget resus varius blandit sit amet non magna. Vestibulum id liguula porta felis euismod semper. |
| 07/01/2019 | 4 | Aenean lacinia bibendum nulla sed consectetur. |
Table with <th> in the <tbody>
| 07/01/2019 | 4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mattis consectetur purus sit amet fermentum. |
|---|---|---|
| 07/01/2019 | 4 | Etiam porta sem malesuada magna mollis euismod. |
| 07/01/2019 | 4 | Maecenas sed diam eget resus varius blandit sit amet non magna. Vestibulum id liguula porta felis euismod semper. |
| 07/01/2019 | 4 | Aenean lacinia bibendum nulla sed consectetur. |
Block Quote
“Innovation is much more than traditional patenting and technology transfer. It is about creating an innovation ecosystem that fosters a fluid exchange of ideas and expertise across a broad spectrum of new and established knowledge.”
Amy Gutmann, Position/Title
Notes
- If the cite element cannot be used a paragraph with a class of cite will produce the same styles.
Buttons and Links
CTA Links
Housing & DiningHousing & Dining
Notes
- The version with the arrow was determined to not be used but is available if that changes.