| Use | Sample | How to implement? |
|---|---|---|
| Citations | Hi, I'm a citation! | HTML <cite> element |
| Basic pullquotes | I'm being quoted here, or maybe just highlighted? |
HTML <blockquote> element. Consider combining with the grid classes and float-left or float-right for a highlight look. |
| Emphasis pullquotes | I'm being quoted here and want to be noticed |
HTML <blockquote> element with class .lead. |
| Emphasis pullquote with quotation mark and citation | I'm being quoted here and want to be noticed. Hi, I'm a citation! |
HTML <blockquote> element with class .lead and .quote. |
| Small text | I'm so small. | CSS class .small |
| Re-sized text | I'm 150%. | CSS class .size-150. This is avialable in 25% increments from 25% to 500% |
| Lead intro text | I'm some intro text. | CSS class .lead |
| Read more | Read more here | CSS class .readmore |
| Read more (as a button) | Read more here | CSS class .readmore .button |
| External link | Read in another site | CSS class .external.These attributes can be added through a JS function. |
| Serif text | For large narrative text areas, consider the CSS class .serif to use the "EB Garamond" font, which is also loaded by the font stylesheet. |
CSS class .serif |
| Serif text | We use sans-serif by default, but maybe you need to force it for some reason? | CSS class .sans-serif |
| Left aligned | Left align your text. | CSS class .text-left |
| Right aligned | Right align your text. | CSS class .text-right |
| Center aligned | Center align your text. | CSS class .text-center |
More utility classes:
.block for display:block;.inline for display:inline;.inline-block for display:inline-block;.hide, .hidden for display:non;.stretch stretch an img's aspect ratio.icon.icon-spacer to add 0.5rem to the right side of an iconFor more utlity classes see this Sass file.