Formatting
A quick index of styles. With a variety of text comes the need for many formatting styles, use this table as a helper.
| 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 |
| 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 |
| 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 |
Formatting HTML
<table>
<thead>
<tr>
<th class="medium-2">Use</th>
<th class="medium-6">Sample</th>
<th>How to implement?</th>
</tr>
</thead>
<tboyd>
<tr>
<td>Citations</td>
<td><cite>Hi, I'm a <a href="#">citation</a>!</cite></td>
<td>HTML <span class="code"><cite></span> element</td>
</tr>
<tr>
<td>Basic pullquotes</td>
<td><blockquote>I'm being quoted here, or maybe just highlighted?</blockquote></td>
<td>HTML <span class="code"><blockquote></span> element. Consider combining with the grid classes and float-left or float-right for a highlight look.</td>
</tr>
<tr>
<td>Emphasis pullquotes</td>
<td><blockquote class="lead">I'm being quoted here and want to be noticed</blockquote></td>
<td>HTML <span class="code"><blockquote></span> element with class <code>.lead</code>.</td>
</tr>
<tr>
<td>Emphasis pullquote with quotation mark and citation</td>
<td><blockquote class="lead quote">I'm being quoted here and want to be noticed. <cite class="text-right">Hi, I'm a <a href="#">citation</a>!</cite></blockquote></td>
<td>HTML <span class="code"><blockquote></span> element with class <code>.lead</code> and <code>.quote</code>.</td>
</tr>
<tr>
<td>Small text</td>
<td><span class="small">I'm so small.</span></td>
<td>CSS class <code>.small</code></td>
</tr>
<tr>
<td>Lead intro text</td>
<td><span class="lead">I'm some intro text.</span></td>
<td>CSS class <code>.lead</code></td>
</tr>
<tr>
<td>Read more</td>
<td><a href="#" class="readmore">Read more here</a></td>
<td>CSS class <code>.readmore</code></td>
</tr>
<tr>
<td>Read more (as a button)</td>
<td><a href="#" class="button readmore">Read more here</a></td>
<td>CSS class <code>.readmore</code> <code>.button</code></td>
</tr>
<tr>
<td>Serif text</td>
<td class="serif">For large narrative text areas, consider the CSS class <code>.serif</code> to use the "EB Garamond" font, which is also loaded by the font stylesheet.</td>
<td>CSS class <code>.serif</code></td>
</tr>
<tr>
<td>Serif text</td>
<td class="sans-serif">We use sans-serif by default, but maybe you need to force it for some reason?</td>
<td>CSS class <code>.sans-serif</code></td>
</tr>
</tbody>
</table>
Formatting Style
You can find the original source of the CSS as .scss
Formatting
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.