Colors

When to Use

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.

TN8 Colors

  • Headings and Text
    • HEX: #333;
    • grayDark
  • Gray Light
    • HEX: #999
    • grayLight
  • Gray Lighter
    • HEX: #EEE
    • grayLighter
  • Primary
    • HEX: #0074CC
    • primaryColor
  • Accent
    • HEX: #049CDB
    • primaryColorAccent
  • Secondary Color
    • HEX: #F5F5F5
    • secondaryColor
  • Primary Links
    • HEX: #0088CC
    • linkColor
  • Link Hover State
    • HEX: #005580
    • linkColorHover

Message Colors

  • Success Text
    • HEX: #468847
    • successText
  • Success Background
    • HEX: #DFF0D8
    • successBackground
  • Warning Text
    • HEX: #C09853
    • warningText
  • Warning Background
    • HEX: #F3EDD2
    • warningBackground
  • Error Text
    • HEX: #B94A48
    • errorText
  • Error Background
    • HEX: #F2DEDE
    • errorBackground


Color Contrasts

The following colors are available as 'Color Contrast' options in the TestNav user menu.

How to Use

Use the User Dropdown button to show the options and select Change the background and foreground color to show the modal with contrast settings.

Black on White (Default)

  • Foreground
    • HEX: #000
    • mainColor
  • Background
    • HEX: #FFF
    • backgroundColor
  • Secondary
    • HEX: #F5F5F5
    • secondaryColor
  • Selectable
    Foreground

    • HEX: #0088CC
    • linkColor
  • Selectable
    Background

    • HEX: #F5F5F5
    • linkColorBackground
  • Selected
    Foreground

    • HEX: #FFF
    • selectedFGColor
  • Selected
    Background

    • HEX: #000
    • selectedBGColor

Black on Cream

  • Foreground
    • HEX: #000
    • mainColor
  • Background
    • HEX: #FFFACD
    • backgroundColor
  • Secondary
    • HEX: #FFF280
    • secondaryColor
  • Selectable
    Foreground

    • HEX: #FFF
    • linkColor
  • Selectable
    Background

    • HEX: #264040
    • linkColorBackground
  • Selected
    Foreground

    • HEX: #000
    • selectedFGColor
  • Selected
    Background

    • HEX: #689999
    • selectedBGColor

Black on Light Blue

  • Foreground
    • HEX: #000
    • mainColor
  • Background
    • HEX: #ADD8E6
    • backgroundColor
  • Secondary
    • HEX: #73DDFF
    • secondaryColor
  • Selectable
    Foreground

    • HEX: #FFF
    • linkColor
  • Selectable
    Background

    • HEX: #000099
    • linkColorBackground
  • Selected
    Foreground

    • HEX: #FFF
    • selectedFGColor
  • Selected
    Background

    • HEX: #000099
    • selectedBGColor

Black on Light Magenta

  • Foreground
    • HEX: #000
    • mainColor
  • Background
    • HEX: #EE82EE
    • backgroundColor
  • Secondary
    • HEX: #FFD8FF
    • secondaryColor
  • Selectable
    Foreground

    • HEX: #FFF
    • linkColor
  • Selectable
    Background

    • HEX: #1919FF
    • linkColorBackground
  • Selected
    Foreground

    • HEX: #000
    • selectedFGColor
  • Selected
    Background

    • HEX: #FFFE33
    • selectedBGColor

White on Black

  • Foreground
    • HEX: #FFF
    • mainColor
  • Background
    • HEX: #000
    • backgroundColor
  • Secondary
    • HEX: #7F5959
    • secondaryColor
  • Selectable
    Foreground

    • HEX: #000
    • linkColor
  • Selectable
    Background

    • HEX: #FFF
    • linkColorBackground
  • Selected
    Foreground

    • HEX: #000
    • selectedFGColor
  • Selected
    Background

    • HEX: #FFFE9E
    • selectedBGColor

Yellow on Blue

  • Foreground
    • HEX: #F5E727
    • mainColor
  • Background
    • HEX: #0000CC
    • backgroundColor
  • Secondary
    • HEX: #4C4CFF
    • secondaryColor
  • Selectable
    Foreground

    • HEX: #000
    • linkColor
  • Selectable
    Background

    • HEX: #CCFFFF
    • linkColorBackground
  • Selected
    Foreground

    • HEX: #000
    • selectedFGColor
  • Selected
    Background

    • HEX: #FFFE9E
    • selectedBGColor

Gray on Green

  • Foreground
    • HEX: #6E6E6E
    • mainColor
  • Background
    • HEX: #A3AD9E
    • backgroundColor
  • Secondary
    • HEX: #C8D7C0
    • secondaryColor
  • Selectable
    Foreground

    • HEX: #6E6E6E
    • linkColor
  • Selectable
    Background

    • HEX: #F0FFE9
    • linkColorBackground
  • Selected
    Foreground

    • HEX: #6E6E6E
    • selectedFGColor
  • Selected
    Background

    • HEX: #B27FB1
    • selectedBGColor


Headings & Paragraphs <h1> - <h6>, <p>

Plain Text Headings

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.

h1. Heading 1

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.

h2. Heading 2

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.

h3. Heading 3

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.

h4. Heading 4

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.

h5. Heading 5

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.

h6. Heading 6

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.


Section Headings

To label sections of like content, we use sectional headings, specially-designed entities to help draw users' attentions and establish priority of content.


Default Heading w/ Buttons

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 Heading

Section headings, our secondary heading style, are slightly smaller and should only use secondary link and button styles.


Section Heading

Section headings, our secondary heading style, are slightly smaller and should only use secondary link and button styles.


When to Use Headings

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).

When to Use Paragraphs

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.

Lead body copy

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, Address, Abbreviations, & Acronyms
<strong>, <em>, <address>, <abbr>, <acronym>

When to Use

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.

Emphasis in a Paragraph

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.


Addresses

The address element is used for—you guessed it!—addresses. Here's how it looks:

Pearson, Inc.
2510 North Dodge Street, Suiteness 100a
Iowa City, IA 52245
P: (800) 867-5309

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

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

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).



Blockquotes <blockquote>

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 (&mdash;).

Quotations: <blockquote>

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

When to Use

Lists are great for presenting a series of related phrases or sentences that need to be read faster (skimming).

Which to Use

Our styles allow for a multitude of lists, including: ul for generic lists, ol for numbered lists, and dl definitions.


Unordered

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Description

<dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal description

<dl class="dl-horizontal">

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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.



Code Inline and block code snippets

Inline

Wrap inline snippets of code with <code>.

For example, <code>section</code> should be wrapped as inline.

Basic block

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>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</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.

Google Prettify

Take the same <pre> element and add two optional classes for enhanced rendering.

<p>Sample text here...</p>
<pre class="prettyprint
     linenums">
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>


The Grid System

The Problem

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.

The Solution

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.

How to Use

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.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6

Nesting Grids

Nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

Example

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.

Level 1 of column
Level 2
Level 2
<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>

Gradient

Add a gradient background to a div or a table with the handy .gradient class. Table head are different compare to table cell.

Example

I'm a padded DIV with a Bordered Gradient.


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>

Icons
Pearson and Font Awesome

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.

Pearson icons TN8

  • tn8-icon-flag
  • tn8-icon-section-open
  • tn8-icon-section-locked
  • tn8-icon-section-closed
  • tn8-icon-answered
  • tn8-icon-incomplete
  • tn8-icon-clock
  • tn8-icon-back
  • tn8-icon-cut
  • tn8-icon-eraser
  • tn8-icon-box
  • tn8-icon-line
  • tn8-icon-mic
  • tn8-icon-mute
  • tn8-icon-resize
  • tn8-icon-expand
  • tn8-icon-collapse
  • tn8-icon-eraser
  • tn8-icon-pencil
  • tn8-icon-pointer
  • tn8-icon-calculator
  • tn8-icon-compass
  • tn8-icon-protractor
  • tn8-icon-answer-eliminator
  • tn8-icon-ruler
  • tn8-icon-straight-line
  • tn8-icon-highlight
  • tn8-icon-text-highlight
  • tn8-icon-spellcheck
  • tn8-icon-charmap
  • tn8-icon-bold
  • tn8-icon-italic
  • tn8-icon-underline
  • tn8-icon-undo
  • tn8-icon-redo
  • tn8-icon-ol
  • tn8-icon-ul
  • tn8-icon-arrow-closed-black
  • tn8-icon-arrow-open-black
  • tn8-icon-closed-arrow-black
  • tn8-icon-open-arrow-black
  • tn8-icon-closed-closed-black
  • tn8-icon-closed-open-black
  • tn8-icon-open-closed-black
  • tn8-icon-open-open-black

Font Awesome 2.0

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.

  • icon-beaker
  • icon-bell
  • icon-bolt
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-certificate
  • icon-check-empty
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-cloud
  • icon-columns
  • icon-comment-alt
  • icon-comments-alt
  • icon-copy
  • icon-credit-card
  • icon-cut
  • icon-dashboard
  • icon-envelope-alt
  • icon-facebook
  • icon-filter
  • icon-fullscreen
  • icon-github
  • icon-globe
  • icon-google-plus-sign
  • icon-google-plus
  • icon-group
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-hdd
  • icon-legal
  • icon-link
  • icon-linkedin
  • icon-list-ol
  • icon-list-ul
  • icon-magic
  • icon-money
  • icon-paper-clip
  • icon-paste
  • icon-phone-sign
  • icon-phone
  • icon-pinterest-sign
  • icon-pinterest
  • icon-reorder
  • icon-rss
  • icon-save
  • icon-sign-blank
  • icon-sitemap
  • icon-sort-down
  • icon-sort-up
  • icon-sort
  • icon-strikethrough
  • icon-table
  • icon-tasks
  • icon-truck
  • icon-twitter
  • icon-umbrella
  • icon-underline
  • icon-undo
  • icon-unlock
  • icon-user-md
  • icon-wrench

Web Application Icons

  • icon-adjust
  • icon-amazon-sign
  • icon-amazon
  • icon-apple-logo
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-bell
  • icon-bike-sign
  • icon-bus-sign
  • icon-car-sign
  • icon-handicap-sign
  • icon-taxi-sign
  • icon-truck-sign
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-cloud
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-js-fiddle
  • icon-key
  • icon-leaf
  • icon-legal
  • icon-lemon
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-rss-sign
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-windows-8
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out

Text Editor Icons

  • icon-file
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-paper-clip
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt

Directional Icons

  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-chevron-down
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-chevron-left
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-right
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-chevron-up

Video Player Icons

  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small

Social Icons

  • icon-blogger-sign
  • icon-blogger
  • icon-delicious-sign
  • icon-evernote-sign
  • icon-evernote
  • icon-facebook-sign
  • icon-facebook
  • icon-flickr-sign
  • icon-flickr
  • icon-github-sign
  • icon-github
  • icon-git-fork
  • icon-google-sign
  • icon-google
  • icon-google-plus-sign
  • icon-google-plus
  • icon-hacker-news
  • icon-lastfm-sign
  • icon-lastfm
  • icon-linkedin-sign
  • icon-linkedin
  • icon-phone-sign
  • icon-phone
  • icon-picasa-sign
  • icon-picasa
  • icon-pinterest-sign
  • icon-pinterest
  • icon-reddit
  • icon-skype
  • icon-soundcloud
  • icon-spotify
  • icon-twitter-sign
  • icon-twitter
  • icon-tumblr-sign
  • icon-tumblr
  • icon-vimeo-sign
  • icon-vimeo
  • icon-wordpress-sign
  • icon-wordpress
  • icon-yahoo-sign
  • icon-yahoo
  • icon-yelp-sign
  • icon-yelp
  • icon-youtube-sign
  • icon-youtube
  • icon-sign-blank


TN8 Item Styleguide v1.3

© Pearson, Inc. All rights reserved.