5 #Typography Typography

Use <p> to denote paragraphs. This will add the appropriate margins between content.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac auctor turpis. In rutrum dolor a sem pretium, et volutpat ex auctor.

Fusce ut risus volutpat, hendrerit quam eget, fringilla orci. Phasellus pulvinar diam nunc, sit amet iaculis augue ultricies laoreet.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac auctor turpis. In rutrum dolor a sem pretium, et volutpat ex auctor.</p>
<p>Fusce ut risus volutpat, hendrerit quam eget, fringilla orci. Phasellus pulvinar diam nunc, sit amet iaculis augue ultricies laoreet.</p>

5.1 #Typography.Disclaimer Disclaimer

disclaimer

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, semper eu risus et, ultrices condimentum magna. Donec tempor neque sed nulla euismod rutrum. Quisque vehicula nulla lacus, sed commodo felis pellentesque at. 

  <p class="disclaimer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, semper eu risus et, ultrices condimentum magna. Donec <a href="#">tempor neque</a> sed nulla euismod rutrum. Quisque vehicula nulla lacus, sed commodo felis pellentesque at.
  </p>

5.2 #Typography.HRs HRs

Only use <hr>s as a separator between sections of a page. Do not use them between a header and the related content.

Examples
Default styling
hr-dotted
Thin dotted HR
hr-solid
Thin solid HR 
  <hr class="[modifier class]">

5.3 #Typography.Inverse Inverse

inverse

When a container has a dark background, apply the inverse class to correct text colors so they remain readable.

Example

Lorem ipsum dolor sit amet.

  <div class="inverse" style="background-color: #333;">
    <p>Lorem ipsum dolor <a href="#">sit amet</a>.</p>
  </div>

5.4 #Typography.Links Links

Links to PDF and CSV files will automatically be marked.

Use no-extension to remove the file extension. This may be added either to the link or its container.

Example

Link to file

Link to file

  <p><a href="http://example.com/example.pdf">Link to file</a></p>
  <p><a href="http://example.com/example.csv">Link to file</a></p>
Example

Link without extension

Link without extension

Show Markup
  <p>
   <a class="no-extension" href="http://example.com/example.pdf">Link without extension</a>
  </p>
  <p class="no-extension">
   <a href="http://example.com/example.pdf">Link without extension</a>
  </p>

5.4.1 #Typography.Links.Alternate Alternate Links

alt-link

Example
Links within the container will have a darker color. 
<div class="alt-link">
  Links within the container <a href="#">will have a
  darker color</a>.
</div>

5.4.2 #Typography.Links.Category Category Link

The btn-more class works in conjunction with these links to add an arrow icon.

Example
Agriculture 
  <a href="#" class="category-link">Agriculture</a>

5.4.3 #Typography.Links.Standalone Standalone Link

standalone-link

Example
Read more 
<a href="#" class="standalone-link">Read more</a>
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, semper eu risus et, ultrices condimentum magna.
Read more

Show Markup
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, semper eu risus et, ultrices condimentum magna.
  <br>
  <a href="#" class="standalone-link">Read more</a>
</p>

5.5 #Typography.Lists Listing Lists

listing-title, listing-description

These are primarily for use in Category Lists.

Example

End of Day

View Settlement Reports for All Markets
<h4 class="listing-title">End of Day</h4>
<div class="listing-description">View Settlement Reports for All Markets</div>

5.6 #Typography.Lead Lead copy

lead

Make a short paragraph stand out by adding lead. Avoid using this for long blocks of text.

Example

Your search "asdf" did not match any pages.

<p class="lead">Your search "asdf" did not match any pages.</p>