LibGuides Login Reusable Assets

Text (Typography)

Organize and highlight your content with strong typographic hierarchy.

Alerts / Notes

Alerts and notes are useful to make information 'pop'—foregrounding important information, indicating success, offering warnings, declaring prohibition, and elevating specific links.

 Find Icon 

<div class="alert alert-danger" role="alert">
   <p><i class="fa fa-times-circle fa-spacer-right" aria-hidden="true"></i><strong>Standardized Fonts</strong><br/>Except in special cases, such as foreign languages or maths symbols, please do not change font face or font size in your guides.</p>
</div>

Blockquotes

Blockquotes are especially useful as epigraphs introducing content blocks.

And when this happens, when we allow freedom to ring, when we let it ring from every village and every hamlet, from every state and every city, we will be able to speed up that day when all of God's children, black men and white men, Jews and Gentiles, Protestants and Catholics, will be able to join hands and sing in the words of the old Negro spiritual: “Free at last! Free at last! Thank God Almighty, we are free at last!”

<blockquote>
   <p>And when this happens, when we allow freedom to ring, when we let it ring from every village and every hamlet, from every state and every city, we will be able to speed up that day when all of God's children, black men and white men, Jews and Gentiles, Protestants and Catholics, will be able to join hands and sing in the words of the old Negro spiritual: “Free at last! Free at last! thank God Almighty, we are free at last!”</p>
   <footer>Rev. Martin Luther King, Jr.<cite title="Source Title"><a href="http://www.americanrhetoric.com/speeches/mlkihaveadream.htm">“I Have a Dream”</a></cite></footer>
</blockquote>

Body Text (Paragraphs)

Body text is spaced and sized for best readability at approximately 16 pixels. Any text you enter into the WYSIWYG editor will be body text (<p>) by default.

Paragraphs make up the bulk of the text you create.

They are left-aligned and vertically block-spaced. 

<p>Paragraphs make up the bulk of the text you create.</p>
<p>The are left-aligned and vertically block-spaced.</p>

Headings

Use headings to subdivide the content in your Rich Text / HTML boxes. Generally, you might use <H3> headings to head a content block for the entire box. Use <H4> headings to further subdivide the content into sections. Use <h5> and <h6> headings to further subdivide the <h4> content blocks.

See an example hierarchy of headings

Limited Headings
Headings <H1> and <H2> are not available in the WYSIWYG editor dropdown menu. For accessibility reasons, these should not be used in Rich Text / HTML boxes.

This is an H3 heading. It's the largest header.

This is an H4 heading. It's an unbolded header

This is an H5 heading. It's a bolded sub-header.
This is an H6 heading. It's a smaller bolded, italicized sub-header.
<h3>This is an H3 heading. It's the largest header.</h3>

<h4>This is an H4 heading. It has a bottom border.</h4>

<h5>This is an H5 heading. It's a bolded sub-header.</h5>

<h6>This is an H6 heading. It's an italicized sub-header or sub-sub-header.</h6>

Labels

Labels pop! They add meaning contextually, and are best when used sparingly.

Advertising Red Books Library Only

Ad$pender Online Best Bet

<p>Advertising Red Books<span class='label label-warning'>Library Only</span></p><p>Ad$pender Online<span class='label label-success'>Best Bet</span></p>

Links (Inside a Rich Text /HTML content item)

Links are the way we help users—including users with visual impairment—quickly and efficiently reach important resources. For that reason it's important to make links meaningful.

To supercharge your guides, Read the Handbook!

<p>To supercharge your guides, <a href="handbook.html" target="_self">Read the Handbook!</a></p>

There are 2 distinct ways to add links in guides. The difference is important.

Link Added... Type of Link Note
As System Components

Use for:
Into Rich Text Boxes

Use for:

Special Text Formats

When used correctly, special textual formats decidedly improve the usability and readability of textual entries. Many of these special text formats are available under the Styles dropdown menu in the WYSIWYG editor.

Lead Text

Use lead text to summarize content or focus readers

 
<p class="lead">Use lead text to summarize content or focus readers</p>
Math Variables a + b = c 
<var>a</var> + <var>b</var> = <var>c</var>
Keyboard Keys CTRL + Z 
<kbd>CTRL</kbd> + <kbd>Z</kbd>
Computer Code <p>This is a paragraph element</p> 
<code><p>This is a paragraph element</p></code>
Sample Computer Output You have pressed a key! 
<samp>You have pressed a key!</samp>
Marker Text Pay attention to this 
Pay attention <mark>to this</mark>
Typewriter Typewriter Text 
<tt>Typewriter Text</tt>
Linethrough This and not that 
This and <del>not that</del>
Small Text Primary Text (subordinate text) 
Primary text <small>(subordinate text)</small>
Big Text I wish...I were big! 
I wish...<big>I were big!</big>
Superscript 23 = 8 
2<sup>3</sup> = 8
Subscript Water, a.k.a. H2O 
Water, a.k.a. H<sub>2</sub>O
Uppercase

make this uppercase!

 
<p class="text-uppercase">make this uppercase!</p>