By default, these colors should be used before any other. Hover states for links must use the darkest colors available.
Note: Never use black text on any darker-colored background.
The following colors are available as 'Color Contrast' options in the TestNav user menu.
Use the User Dropdown button to show the options and select Change the background and foreground color to show the modal with contrast settings.
Selectable
Foreground
Selectable
Background
Selected
Foreground
Selected
Background
Selectable
Foreground
Selectable
Background
Selected
Foreground
Selected
Background
Selectable
Foreground
Selectable
Background
Selected
Foreground
Selected
Background
Selectable
Foreground
Selectable
Background
Selected
Foreground
Selected
Background
Selectable
Foreground
Selectable
Background
Selected
Foreground
Selected
Background
Selectable
Foreground
Selectable
Background
Selected
Foreground
Selected
Background
Selectable
Foreground
Selectable
Background
Selected
Foreground
Selected
Background
For regular body copy, follow these styles to create body content. We preserve the native HTML elements (h1, h2, h3, h4, h5, h6, and p) to allow for easy to read and concise blocks of text.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
To label sections of like content, we use sectional headings, specially-designed entities to help draw users' attentions and establish priority of content.
We use a default heading with a button to denote the primary content and action on the page. Use only 1-2 of these per page.
Section headings, our secondary heading style, are slightly smaller and should only use secondary link and button styles.
Section headings, our secondary heading style, are slightly smaller and should only use secondary link and button styles.
Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest).
Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Emphasis tags (<strong> and <em>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <strong> for plain old attention and <em> for slick attention and titles.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
The address element is used for—you guessed it!—addresses. Here's how it looks:
Note: Each line in an address must have a line-break (<br />) after it to properly structure the content as it is read in real life.
Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.
Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.
HTML is the best thing since sliced bread. An abbreviation of the word attribute is attr.
Acronyms are actually a subset of abbreviations, a shorter form of another word. The difference is that regular abbreviations are just shorthand notations for a word, while acronyms are strings of the first letter in a multi-word phrase.
Example acronyms include HTML and CSS, while a great abbreviation is Prof. (short for Professor).
Be sure to wrap your blockquote around paragraph and cite tags.
When citing a source, use the cite element and preface a name with an em dash (—).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Dr. Julius Hibbert
Lists are great for presenting a series of related phrases or sentences that need to be read faster (skimming).
Our styles allow for a multitude of lists, including: ul for generic lists, ol for numbered lists, and dl definitions.
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Heads up!
Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
Wrap inline snippets of code with <code>.
For example, <code>section</code> should be wrapped as inline.
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
<pre> <p>Sample text here...</p> </pre>
Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
Take the same <pre> element and add two optional classes for enhanced rendering.
<p>Sample text here...</p>
<pre class="prettyprint
linenums">
<p>Sample text here...</p>
</pre>
You've got tons of content, each needing different sized vertical columns, and don't know how to quickly and easily get it all done.
By creating a small framework of classes, we can utilize a 940px wide, 12-column grid to achieve any number of combinations of columns. Popular combinations include 8 and 4, 2-6-4, and 4-4-4.
The default grid system renders out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.
Using this framework is easy. Here's how your code will look when you use a series of <div>s to create vertical columns.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.
Nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.
Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.
<div class="row">
<div class="span6">
Level 1 column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Add a gradient background to a div or a table with the handy .gradient class. Table head are different compare to table cell.
| Gradient Table Head | Gradient Table Head |
|---|---|
| Gradient Table Cell | Gradient Table Cell |
<div class="gradient bordered">Gradient Div</div>
<table cellpadding="5">
<tr>
<th class="gradient">Gradient Table Head</th>
<th class="gradient">Gradient Table Head</th>
</tr>
<tr>
<td class="gradient">Gradient Table Cell</td>
<td class="gradient">Gradient Table Cell</td>
</tr>
</table>
There is a wide variety of icons available in TN8. We use Font Awesome icons but also Pearson-specific icons. If an icon doesn't display below, its because it doesn't exist in our copy of Font Awesome, which is OLD.
You asked, Font Awesome delivers with 70 shiny new icons in version 2.0. This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap 2.0.3.