Introduction

This digital guidelines document is a tool for Consumer Reports and its collaborators to consistently deploy the Consumer Reports identity and maintain visual consistency across various digital formats and applications

Important

In the markup and styling of the styleguide's presentation, there are classes that are prefixed by cr-styleguide. These classes are used solely for the purpose of layout of the styleguide itself, and not intended to be used outside this site. These classes do not exist in the crux-styles stylesheets, and should never be used outside this site.

Example

<div class="cr-styleguide-crux-body-copy--list__container">
    <ul class="crux-body-copy crux-body-copy--list">
        <li><a href="#">Body copy list item one.</a></li>
        <li><a href="#">Body copy list item two.</a></li>
    </ul>
</div>

In the example above - cr-styleguide-crux-body-copy--list__container is a styleguide only class and should not be used in your external styles. crux-body-copy and crux-body-copy--list are styles prefixed by crux-, and can be used externally.

Base Rules

Base rules are the defaults. They are almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors.

Grid

Pages should be designed using Bootstrap 3's mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

There are some additional custom grid-classes which can be used with bootstrap grid elements. .crux-container derives from bootstrap .container, with a change for tablet sized devices.

Here is a container
<div class="crux-container crux-grid-block crux-background-gray-bg">Here is a container</div>

Also there are two classes for adding offsets to columns: .crux-offset--left and .crux-offset--right

The values of these are 60px (for desktop) and 30px (for tablet).

Two-columns layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. 
<div class="crux-container crux-grid-block crux-background-gray-bg">
    <div class="row">
        <div class="col-xs-8 crux-offset--left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. </div>
        <div class="col-xs-4 crux-offset--right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. </div>
    </div>
</div>

Three-columns layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. 
<div class="crux-container crux-grid-block crux-background-gray-bg">
    <div class="row">
        <div class="col-xs-4 crux-offset--left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. </div>
        <div class="col-xs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. </div>
        <div class="col-xs-4 crux-offset--right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. </div>
    </div>
</div>

One-column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. 
<div class="crux-container crux-grid-block crux-background-gray-bg">
    <div class="row">
        <div class="col-xs-12 crux-offset--left crux-offset--right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt. </div>
    </div>
</div>

Breakpoints

Colors

Colors Primary

The primary Consumer Reports colors are green and black.

White: #FFFFFF; Green: #00AE4D; Black: #000; 
<div class="cr-styleguide-block">
    <span class="crux-white-bg cr-styleguide-circle">White: #FFFFFF;</span>
    <span class="crux-green-bg cr-styleguide-circle">Green: #00AE4D;</span>
    <span class="crux-black-bg cr-styleguide-circle">Black: #000;</span>
</div>

The following classes exist as shortcuts for colors and can be used. Note you can also append -bg to the class to get the color as your background (as seen above).

.crux-white / .crux-black / .crux-green

Colors Secondary

The five colors shown below are used within the ratings systems for both print and digital. These colors indicate a positive or negative attribute and should only be used in that context.

Excellent Very Good Good Fair Poor 
<div class="cr-styleguide-block">
    <span class="crux-color-excellent">Excellent</span>
    <span class="crux-color-very-good">Very Good</span>
    <span class="crux-color-good">Good</span>
    <span class="crux-color-fair">Fair</span>
    <span class="crux-color-poor">Poor</span>
</div>
Excellent: #00AE4D; Very Good: #BFD730; Good: #FFD500; Fair: #F8941D; Poor: #EC1C24; 
<div class="cr-styleguide-block">
    <span class="crux-color-excellent-bg cr-styleguide-circle">Excellent: #00AE4D;</span>
    <span class="crux-color-very-good-bg cr-styleguide-circle">Very Good: #BFD730;</span>
    <span class="crux-color-good-bg cr-styleguide-circle">Good: #FFD500;</span>
    <span class="crux-color-fair-bg cr-styleguide-circle">Fair: #F8941D;</span>
    <span class="crux-color-poor-bg cr-styleguide-circle">Poor: #EC1C24;</span>
</div>

Digital Grayscale

#000000; #505050; #999999; #C8C8C8; #DCDCDC; #F0F0F0; 
<div class="cr-styleguide-block">
    <span class="crux-black-bg cr-styleguide-circle">#000000;</span>
    <span class="crux-dark-gray-bg cr-styleguide-circle">#505050;</span>
    <span class="crux-primary-gray-bg cr-styleguide-circle">#999999;</span>
    <span class="crux-medium-gray-bg cr-styleguide-circle">#C8C8C8;</span>
    <span class="crux-middle-gray-bg cr-styleguide-circle">#DCDCDC;</span>
    <span class="crux-background-gray-bg cr-styleguide-circle">#F0F0F0;</span>
</div>

Additionally .crux-unrated and .crux-unrated-bg are alternate classnames for .crux-medium-gray and .crux-medium-gray-bg, respectively.

#C8C8C8; 
<div class="cr-styleguide-block">
    <span class="crux-unrated-bg cr-styleguide-circle">#C8C8C8;</span>
</div>

To use a color for copy, use the classes above without the '-bg' applied. For instance:

This is some red text. 
<span class="crux-color-poor">This is some red text.</span>

Typography

The Consumer Reports brand typeface is called Averta. The Averta type family has many weights, but only four weights are to be used for Consumer Report materials. Below is a listing of appropriate type usages. Though these weights have italic counterparts, they should be avoided.

Here is a page title. With a link.

<h1 class="crux-page-title">Here is a page title. <a href="#">With a link.</a></h1>

Here is a section header title. With a link.

<h1 class="crux-section-header">Here is a section header title. <a href="#">With a link.</a></h1>

Here is a section header small title. With a link.

<h1 class="crux-section-header--small">Here is a section header small title. <a href="#">With a link.</a></h1>
Here is a intro large title. With a link. 
<span class="crux-intro-large">Here is a intro large title. <a href="#">With a link.</a></span>

Body copy. Lorem ipsum dolor sit amet, consectetur adipisicing elit. With link. Dolorem id mollitia rerum quos nam fugiat unde reprehenderit ducimus, delectus vero. Repellendus dolores possimus ut delectus laboriosam suscipit nihil iusto cum.

<p class="crux-body-copy">Body copy. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">With link</a>. Dolorem id mollitia rerum quos nam fugiat unde reprehenderit ducimus, delectus vero. Repellendus dolores possimus ut delectus laboriosam suscipit nihil iusto cum.</p>

Body copy, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, exercitationem saepe necessitatibus nesciunt ullam magnam quasi. Perspiciatis, quibusdam molestias doloribus sapiente quam. Aliquid magnam, animi, ea maiores sit quibusdam. With a link.

<p class="crux-body-copy crux-body-copy--bold">Body copy, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, exercitationem saepe necessitatibus nesciunt ullam magnam quasi. Perspiciatis, quibusdam molestias doloribus sapiente quam. Aliquid magnam, animi, ea maiores sit quibusdam.  <a href="#">With a link.</a></p>

Body copy, small. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum voluptas similique doloremque repellendus ducimus vel laborum a minima aperiam nam eum ut quam, fuga soluta dolores eius facere deserunt, quaerat. With a link.

<p class="crux-body-copy crux-body-copy--small">Body copy, small. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum voluptas similique doloremque repellendus ducimus vel laborum a minima aperiam nam eum ut quam, fuga soluta dolores eius facere deserunt, quaerat. <a href="#">With a link</a>.</p>

Body copy, small, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem consequuntur, pariatur quas vitae quos obcaecati, dolorem eaque corporis adipisci magni, assumenda eligendi? Ad, velit quasi id impedit itaque quaerat eaque. With a link.

<p class="crux-body-copy crux-body-copy--small--bold">Body copy, small, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem consequuntur, pariatur quas vitae quos obcaecati, dolorem eaque corporis adipisci magni, assumenda eligendi? Ad, velit quasi id impedit itaque quaerat eaque. <a href="#">With a link.</a></p>

Body copy, extra small. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quam aut blanditiis magni dolores illo vero fuga perferendis praesentium mollitia! Beatae, quas hic adipisci id repellendus accusamus. Saepe sed, ratione. With a link.

<p class="crux-body-copy crux-body-copy--extra-small">Body copy, extra small. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quam aut blanditiis magni dolores illo vero fuga perferendis praesentium mollitia! Beatae, quas hic adipisci id repellendus accusamus. Saepe sed, ratione. <a href="#">With a link</a>.</p>

Body copy, extra small, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quam aut blanditiis magni dolores illo vero fuga perferendis praesentium mollitia! Beatae, quas hic adipisci id repellendus accusamus. Saepe sed, ratione. With a link.

<p class="crux-body-copy crux-body-copy--extra-small--bold">Body copy, extra small, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quam aut blanditiis magni dolores illo vero fuga perferendis praesentium mollitia! Beatae, quas hic adipisci id repellendus accusamus. Saepe sed, ratione. <a href="#">With a link</a>.</p>

Link List View

<div class="cr-styleguide-crux-body-copy--list__container">
    <ul class="crux-body-copy crux-body-copy--list">
        <li><a href="#">Body copy list item one.</a></li>
        <li><a href="#">Body copy list item two.</a></li>
        <li><a href="#">Body copy list item three.</a></li>
        <li><a href="#">Body copy list item four.</a></li>
        <li><a href="#">Body copy list item five.</a></li>
    </ul>
    <ul class="crux-body-copy crux-body-copy--list">
        <li><a href="#">Body copy list item one.</a></li>
        <li><a href="#">Body copy list item two.</a></li>
        <li><a href="#">Body copy list item three.</a></li>
        <li><a href="#">Body copy list item four.</a></li>
        <li><a href="#">Body copy list item five.</a></li>
    </ul>
    <ul class="crux-body-copy crux-body-copy--list">
        <li><a href="#">Body copy list item one.</a></li>
        <li><a href="#">Body copy list item two.</a></li>
        <li><a href="#">Body copy list item three.</a></li>
        <li><a href="#">Body copy list item four.</a></li>
        <li><a href="#">Body copy list item five.</a></li>
    </ul>
</div>

Link List View Small

<div class="cr-styleguide-crux-body-copy--list__container">
    <ul class="crux-body-copy crux-body-copy--small crux-body-copy--list">
        <li><a href="#">Body copy list item one.</a></li>
        <li><a href="#">Body copy list item two.</a></li>
        <li><a href="#">Body copy list item three.</a></li>
        <li><a href="#">Body copy list item four.</a></li>
        <li><a href="#">Body copy list item five.</a></li>
    </ul>
    <ul class="crux-body-copy crux-body-copy--small crux-body-copy--list">
        <li><a href="#">Body copy list item one.</a></li>
        <li><a href="#">Body copy list item two.</a></li>
        <li><a href="#">Body copy list item three.</a></li>
        <li><a href="#">Body copy list item four.</a></li>
        <li><a href="#">Body copy list item five.</a></li>
    </ul>
    <ul class="crux-body-copy crux-body-copy--small crux-body-copy--list">
        <li><a href="#">Body copy list item one.</a></li>
        <li><a href="#">Body copy list item two.</a></li>
        <li><a href="#">Body copy list item three.</a></li>
        <li><a href="#">Body copy list item four.</a></li>
        <li><a href="#">Body copy list item five.</a></li>
    </ul>
</div>

Captions looks like this. With a link.

<p class="crux-captions">Captions looks like this. <a href="#">With a link</a>.</p>
Article content looks like this. With a link.
<div class="crux-article">Article content looks like this. <a href="#">With a link.</a></div>

Article H3 looks like this. With a link.

<div class="crux-article"><h3>Article H3 looks like this. <a href="#">With a link.</a></h3></div>

Article body looks like this. A bold item would look like this, and italics will look like this. With a link.

  • Item one.
  • Item two.
  • Item three.
<div class="crux-article"><p>Article body looks like this. <b>A bold item would look like this</b>, <em>and italics will look like this</em>. <a href="#">With a link.</a></p>
<ul><li>Item one.</li><li>Item two.</li><li>Item three.</li></ul></div>
Article Link looks like this. This class is intended to be used on an actual anchor link. 
<a class="crux-article__bold-link">Article Link looks like this. This class is intended to be used on an actual anchor link.</a>
Article Link Small looks like this. This class is intended to be used on an actual anchor link. 
<a class="crux-article__bold-link crux-article__bold-link--small">Article Link Small looks like this. This class is intended to be used on an actual anchor link.</a>
Quote looks like this.
<div class="crux-quote">Quote looks like this.</div>

Headline Standard looks like this. With a link.

<p class="crux-headline--standard">Headline Standard looks like this. <a href="#">With a link.</a></p>

Headline Feature looks like this. With a link.

<p class="crux-headline--feature">Headline Feature looks like this. <a href="#">With a link.</a></p>

Marketing Title looks like this. With a link.

<p class="crux-marketing--title">Marketing Title looks like this. <a href="#">With a link.</a></p>

Call to action looks like this. With a link.

<p class="crux-call-to-action">Call to action looks like this. <a href="#">With a link.</a></p>

74

<p class="crux-numbers">74</p>

74

<p class="crux-numbers crux-numbers--extra-large">74</p>

74

<p class="crux-numbers crux-numbers--large">74</p>

74

<p class="crux-numbers crux-numbers--medium">74</p>

74

<p class="crux-numbers crux-numbers--small">74</p>

Product title looks like this. With a link.

<p class="crux-product-title">Product title looks like this. <a href="#">With a link.</a></p>

Product title small looks like this. With a link.

<p class="crux-product-title--small">Product title small looks like this. <a href="#">With a link.</a></p>

Component title looks like this. With a link.

<p class="crux-component-title">Component title looks like this. <a href="#">With a link.</a></p>

Label style looks like this. With a link.

<p class="crux-label-style">Label style looks like this. <a href="#">With a link.</a></p>

Label style regular looks like this. With a link.

<p class="crux-label-style--regular">Label style regular looks like this. <a href="#">With a link.</a></p>

Label style (small) looks like this. With a link.

<p class="crux-label-style crux-label-style--small">Label style (small) looks like this. <a href="#">With a link.</a></p>

CR Ratings

Overall Score Responsive

Excellent

100

<div class="crux-overall-score-responsive crux-color-excellent-bg">
    <p class="crux-numbers-score crux-white">100</p>
</div>

Very Good

80

<div class="crux-overall-score-responsive crux-color-very-good-bg">
    <p class="crux-numbers-score crux-white">80</p>
</div>

Good

50

<div class="crux-overall-score-responsive crux-color-good-bg">
    <p class="crux-numbers-score crux-white">50</p>
</div>

Fair

20

<div class="crux-overall-score-responsive crux-color-fair-bg">
    <p class="crux-numbers-score crux-white">20</p>
</div>

Poor

8

<div class="crux-overall-score-responsive crux-color-poor-bg">
    <p class="crux-numbers-score crux-white">8</p>
</div>

Locked

<div class="crux-overall-score-responsive crux-background-gray-bg">
    <p class="crux-icons crux-icons-lock-solid crux-green"></p>
</div>

<div class="crux-overall-score-responsive crux-color-excellent-bg">
    <p class="crux-icons crux-icons-lock-solid crux-white"></p>
</div>

In Test/Not In Test

In Test

<div class="crux-overall-score-responsive crux-dark-gray-bg">
    <p class="crux-overall-score-in-test">In Test</p>
</div>

Not Tested

<div class="crux-overall-score-responsive crux-dark-gray-bg">
    <p class="crux-overall-score-not-tested">Not Tested</p>
</div>

Overall Score Static

XS

100

<div class="crux-overall-score-static crux-overall-score--xs crux-color-excellent-bg">
    <p class="crux-numbers-score crux-white">100</p>
</div>

80

<div class="crux-overall-score-static crux-overall-score--xs crux-color-very-good-bg">
    <p class="crux-numbers-score crux-white">80</p>
</div>

50

<div class="crux-overall-score-static crux-overall-score--xs crux-color-good-bg">
    <p class="crux-numbers-score crux-white">50</p>
</div>

20

<div class="crux-overall-score-static crux-overall-score--xs crux-color-fair-bg">
    <p class="crux-numbers-score crux-white">20</p>
</div>

8

<div class="crux-overall-score-static crux-overall-score--xs crux-color-poor-bg">
    <p class="crux-numbers-score crux-white">8</p>
</div>

<div class="crux-overall-score-static crux-overall-score--xs crux-background-gray-bg">
    <p class="crux-icons crux-icons-lock-solid crux-green"></p>
</div>

<div class="crux-overall-score-static crux-overall-score--xs crux-color-excellent-bg">
    <p class="crux-icons crux-icons-lock-solid crux-white"></p>
</div>

In Test

<div class="crux-overall-score-static crux-overall-score--xs crux-dark-gray-bg">
    <p class="crux-overall-score-in-test">In Test</p>
</div>

Not Tested

<div class="crux-overall-score-static crux-overall-score--xs crux-dark-gray-bg">
    <p class="crux-overall-score-not-tested">Not Tested</p>
</div>

SM

100

<div class="crux-overall-score-static crux-overall-score--sm crux-color-excellent-bg">
    <p class="crux-numbers-score crux-white">100</p>
</div>

80

<div class="crux-overall-score-static crux-overall-score--sm crux-color-very-good-bg">
    <p class="crux-numbers-score crux-white">80</p>
</div>

50

<div class="crux-overall-score-static crux-overall-score--sm crux-color-good-bg">
    <p class="crux-numbers-score crux-white">50</p>
</div>

20

<div class="crux-overall-score-static crux-overall-score--sm crux-color-fair-bg">
    <p class="crux-numbers-score crux-white">20</p>
</div>

8

<div class="crux-overall-score-static crux-overall-score--sm crux-color-poor-bg">
    <p class="crux-numbers-score crux-white">8</p>
</div>

<div class="crux-overall-score-static crux-overall-score--sm crux-background-gray-bg">
    <p class="crux-icons crux-icons-lock-solid crux-green"></p>
</div>

<div class="crux-overall-score-static crux-overall-score--sm crux-color-excellent-bg">
    <p class="crux-icons crux-icons-lock-solid crux-white"></p>
</div>

In Test

<div class="crux-overall-score-static crux-overall-score--sm crux-dark-gray-bg">
    <p class="crux-overall-score-in-test">In Test</p>
</div>

Not Tested

<div class="crux-overall-score-static crux-overall-score--sm crux-dark-gray-bg">
    <p class="crux-overall-score-not-tested">Not Tested</p>
</div>

MD

100

<div class="crux-overall-score-static crux-overall-score--md crux-color-excellent-bg">
    <p class="crux-numbers-score crux-white">100</p>
</div>

80

<div class="crux-overall-score-static crux-overall-score--md crux-color-very-good-bg">
    <p class="crux-numbers-score crux-white">80</p>
</div>

50

<div class="crux-overall-score-static crux-overall-score--md crux-color-good-bg">
    <p class="crux-numbers-score crux-white">50</p>
</div>

20

<div class="crux-overall-score-static crux-overall-score--md crux-color-fair-bg">
    <p class="crux-numbers-score crux-white">20</p>
</div>

8

<div class="crux-overall-score-static crux-overall-score--md crux-color-poor-bg">
    <p class="crux-numbers-score crux-white">8</p>
</div>

<div class="crux-overall-score-static crux-overall-score--md crux-background-gray-bg">
    <p class="crux-icons crux-icons-lock-solid crux-green"></p>
</div>

<div class="crux-overall-score-static crux-overall-score--md crux-color-excellent-bg">
    <p class="crux-icons crux-icons-lock-solid crux-white"></p>
</div>

In Test

<div class="crux-overall-score-static crux-overall-score--md crux-dark-gray-bg">
    <p class="crux-overall-score-in-test">In Test</p>
</div>

Not Tested

<div class="crux-overall-score-static crux-overall-score--md crux-dark-gray-bg">
    <p class="crux-overall-score-not-tested">Not Tested</p>
</div>

LG

100

<div class="crux-overall-score-static crux-overall-score--lg crux-color-excellent-bg">
    <p class="crux-numbers-score crux-white">100</p>
</div>

80

<div class="crux-overall-score-static crux-overall-score--lg crux-color-very-good-bg">
    <p class="crux-numbers-score crux-white">80</p>
</div>

50

<div class="crux-overall-score-static crux-overall-score--lg crux-color-good-bg">
    <p class="crux-numbers-score crux-white">50</p>
</div>

20

<div class="crux-overall-score-static crux-overall-score--lg crux-color-fair-bg">
    <p class="crux-numbers-score crux-white">20</p>
</div>

8

<div class="crux-overall-score-static crux-overall-score--lg crux-color-poor-bg">
    <p class="crux-numbers-score crux-white">8</p>
</div>

<div class="crux-overall-score-static crux-overall-score--lg crux-background-gray-bg">
    <p class="crux-icons crux-icons-lock-solid crux-green"></p>
</div>

<div class="crux-overall-score-static crux-overall-score--lg crux-color-excellent-bg">
    <p class="crux-icons crux-icons-lock-solid crux-white"></p>
</div>

In Test

<div class="crux-overall-score-static crux-overall-score--lg crux-dark-gray-bg">
    <p class="crux-overall-score-in-test">In Test</p>
</div>

Not Tested

<div class="crux-overall-score-static crux-overall-score--lg crux-dark-gray-bg">
    <p class="crux-overall-score-not-tested">Not Tested</p>
</div>

XL

100

<div class="crux-overall-score-static crux-overall-score--xl crux-color-excellent-bg">
    <p class="crux-numbers-score crux-white">100</p>
</div>

80

<div class="crux-overall-score-static crux-overall-score--xl crux-color-very-good-bg">
    <p class="crux-numbers-score crux-white">80</p>
</div>

50

<div class="crux-overall-score-static crux-overall-score--xl crux-color-good-bg">
    <p class="crux-numbers-score crux-white">50</p>
</div>

20

<div class="crux-overall-score-static crux-overall-score--xl crux-color-fair-bg">
    <p class="crux-numbers-score crux-white">20</p>
</div>

8

<div class="crux-overall-score-static crux-overall-score--xl crux-color-poor-bg">
    <p class="crux-numbers-score crux-white">8</p>
</div>

<div class="crux-overall-score-static crux-overall-score--xl crux-background-gray-bg">
    <p class="crux-icons crux-icons-lock-solid crux-green"></p>
</div>

<div class="crux-overall-score-static crux-overall-score--xl crux-color-excellent-bg">
    <p class="crux-icons crux-icons-lock-solid crux-white"></p>
</div>

In Test

<div class="crux-overall-score-static crux-overall-score--xl crux-dark-gray-bg">
    <p class="crux-overall-score-in-test">In Test</p>
</div>

Not Tested

<div class="crux-overall-score-static crux-overall-score--xl crux-dark-gray-bg">
    <p class="crux-overall-score-not-tested">Not Tested</p>
</div>

Navigation

<ul>
    <li class="crux-main-nav__link">Main Navigation</li>
    <li class="crux-main-nav__link"><a href="#">Navigation</a></li>
</ul>

Sub Nav Links

<ul>
    <li class="crux-sub-nav__link">Sub Navigation</li>
    <li class="crux-sub-nav__link"><a href="#">Navigation</a></li>
</ul>

Buttons

The standard desktop button for CR is 60px in height and 45px for mobile.

Primary Button (Responsive)

If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.

<button class="crux-btn crux-btn-primary">Button Text</button>

Primary Button Large

Black buttons should be used on all backgrounds, for normal button functions (i.e. sign up, sign in, save, compare, view ratings).

<button class="crux-btn crux-btn-primary--lg">Button Text</button>

Primary Button Small

<button class="crux-btn crux-btn-primary--sm">Button Text</button>

Special Button (Responsive)

Green buttons should be used on photos, or where a special call to action is required (i.e. subscribe, marketing, donate, membership, sign up, price & shop, non-subscriber view ratings). If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.

<button class="crux-btn crux-btn-special">Button Text</button>

Special Button Large

Green buttons should be used on photos, or where a special call to action is required (i.e. subscribe, marketing, donate, membership, sign up, price & shop, non-subscriber view ratings).

<button class="crux-btn crux-btn-special--lg">Button Text</button>

Special Button Small

<button class="crux-btn crux-btn-special--sm">Button Text</button>

Tertiary Button (Responsive)

Gray buttons should be used sparingly. ( i.e. load more or learn more). If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.

<button class="crux-btn crux-btn-tertiary">Button Text</button>

Tertiary Button Large

Gray buttons should be used sparingly. ( i.e. load more or learn more)

<button class="crux-btn crux-btn-tertiary--lg">Button Text</button>

Tertiary Button Small

<button class="crux-btn crux-btn-tertiary--sm">Button Text</button>

Inactive Button (Responsive)

If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.

<button class="crux-btn crux-btn-inactive" aria-disabled="true">Button Text</button>

Inactive Button Large

<button class="crux-btn crux-btn-inactive--lg" aria-disabled="true">Button Text</button>

Inactive Button Small

<button class="crux-btn crux-btn-inactive--sm" aria-disabled="true">Button Text</button>

Example using input tag

<div class="cr-styleguide-wrapper">
    <input type="button" class="crux-btn crux-btn-primary--lg" value="Button Text"/>
    <input type="button" class="crux-btn crux-btn-special--lg" value="Button Text"/>
    <input type="button" class="crux-btn crux-btn-tertiary--lg" value="Button Text"/>
</div>
<div class="cr-styleguide-wrapper">
    <input type="button" class="crux-btn crux-btn-primary--sm" value="Button Text"/>
    <input type="button" class="crux-btn crux-btn-special--sm" value="Button Text"/>
    <input type="button" class="crux-btn crux-btn-tertiary--sm" value="Button Text"/>
</div>

Example using link

Button Text Button Text Button Text 
<div class="crux-body-copy cr-styleguide-wrapper">
    <a href="#" class="crux-btn crux-btn-primary--lg" role="button">Button Text</a>
    <a href="#" class="crux-btn crux-btn-special--lg" role="button">Button Text</a>
    <a href="#" class="crux-btn crux-btn-tertiary--lg" role="button">Button Text</a>
</div>
Button Text Button Text Button Text 
<div class="crux-body-copy cr-styleguide-wrapper">
    <a href="#" class="crux-btn crux-btn-primary--sm" role="button">Button Text</a>
    <a href="#" class="crux-btn crux-btn-special--sm" role="button">Button Text</a>
    <a href="#" class="crux-btn crux-btn-tertiary--sm" role="button">Button Text</a>
</div>

Disabled Buttons

If using a <button> element, the proper way to represent a disabled button is to use the .crux-btn-inactive button.

<button class="crux-btn crux-btn-inactive--sm" aria-disabled="true">Inactive Button</button>

If using an <input> button, use the :disabled psuedo class.

<input type="button" class="crux-btn crux-btn-primary--lg" value="Button Text" disabled="disabled" aria-disabled="true" />
<input type="button" class="crux-btn crux-btn-special--sm" value="Button Text" disabled="disabled" aria-disabled="true" />

If using the anchor link button, use the class .crux-btn-disabled. Note that this overrides the button text and background colors, and disables the cursor from the button.

Button Text 
<div class="crux-body-copy">
    <a href="#" class="crux-btn crux-btn-primary--sm crux-btn-disabled" role="button" aria-disabled="true">Button Text</a>
</div>

Block Level Button

You can create block level buttons — those that span the full width of a parent - by adding .crux-btn-block.

<button class="crux-btn crux-btn-primary--sm crux-btn-block">Block Button Copy</button>

Components

Components CSS is derived from the base CSS styles. We only override the font settings to apply the Averta font in this CSS.

Pagination Buttons

1 2 3 4 ... 9999 
<div class="crux-pagination">
        <a href="#" class="crux-pagination__page-button crux-pagination__page-button--disabled" role="button" aria-disabled="true"></a>
        <a href="#" class="crux-pagination__page-button crux-pagination__page-button--active" role="button">1</a>
        <a href="#" class="crux-pagination__page-button" role="button">2</a>
        <a href="#" class="crux-pagination__page-button" role="button">3</a>
        <a href="#" class="crux-pagination__page-button" role="button">4</a>
        <span class="crux-ellipses" >...</span>
        <a href="#" class="crux-pagination__page-button" role="button">9999</a>
        <a href="#" class="crux-pagination__page-button crux-pagination__page-button--enabled" role="button"></a>
    </div>

Hover Classes

Using helper classes from Bootstrap: well / well-sm / text-center.

Default Hover

Primary Hover

Tertiary Hover

<div class="well well-sm crux-primary-hover crux-product-title text-center">
    <h1>Default Hover</h1>
</div>

<div class="well well-sm crux-special-hover crux-product-title text-center">
    <h1>Primary Hover</h1>
</div>

<div class="well well-sm crux-tertiary-hover crux-product-title text-center">
    <h1>Tertiary Hover</h1>
</div>

Forms

The styles used here relies on markup, so please make sure you are using exactly the same structure and elements. The cr-styleguide-form-container is an internal class for demonstration purposes only.

Text input field

Blank state

<div class="cr-styleguide-form-container">
    <input class="crux-input" type="text" placeholder="Just a placeholder" aria-label="Just a placeholder"/>
</div>

Input with Tooltips

First names must be original and creative.
<div class="cr-styleguide-form-container">
    <input class="crux-input" type="text" placeholder="Just a placeholder" aria-label="Just a placeholder" aria-describedby="input-with-tooltips"/>
    <div class="crux-input-tooltip" id="input-with-tooltips">First names must be original and creative.</div>
</div>

Input with white Tooltips on gray background

First names must be original and creative.
<div class="cr-styleguide-form-container cr-styleguide-form-gray-background">
    <input class="crux-input" type="text" placeholder="Just a placeholder" aria-label="Just a placeholder" aria-describedby="input-with-white-tooltips-gray-background"/>
    <div class="crux-input-tooltip crux-input-tooltip--white" id="input-with-white-tooltips-gray-background">First names must be original and creative.</div>
</div>

Input with inline button (info)

First names must be original and creative.
<div class="cr-styleguide-form-container">
  <div class="crux-input-with-button-container">
      <input class="crux-input" type="text" placeholder="Just a placeholder" aria-label="Just a placeholder" aria-describedby="input-with-inline-button"/>
      <button class="crux-input-inline-button"><i class="crux-icons crux-icons-help-information"></i></button>
      <div class="crux-input-tooltip" id="input-with-inline-button">First names must be original and creative.</div>
  </div>
</div>

Error state

This is not a valid email address.
<div class="cr-styleguide-form-container">
  <div class="crux-input-error">
      <input class="crux-input" value="wrongemail" type="text" placeholder="Just a placeholder" aria-label="Just a placeholder" aria-required=true aria-invalid=true aria-describedby="error-email-state"/>
      <div class="crux-input-error-message" id="error-email-state">This is not a valid email address.</div>
  </div>
</div>

Disabled state (input with placeholder)

<div class="cr-styleguide-form-container">
    <input class="crux-input crux-disabled" type="text" placeholder="Just a placeholder" aria-label="Just a placeholder" aria-disabled=true/>
</div>

Disabled state (input with value)

You may have noticed that in this case we are using disabled attribute instead of crux-disabled class, you can use any of these for the component. crux-disabled is here in order to be consistent with all other form components, since some of them like Dropdown are custom, they don't support disabled attribute.

<div class="cr-styleguide-form-container">
    <input class="crux-input" disabled="disabled" value="Some Value" type="text" placeholder="Just a placeholder" aria-label="Just a placeholder" aria-disabled=true/>
</div>

Text Area

Blank state

<div class="cr-styleguide-form-container">
  <textarea class="crux-textarea" placeholder="Placeholder text here" aria-label="Placeholder text here"></textarea>
</div>

Ideal State

<div class="cr-styleguide-form-container">
  <textarea class="crux-textarea" placeholder="Placeholder text here" aria-label="Placeholder text here">Filled in text here</textarea>
</div>

Error state

Error goes here
<div class="cr-styleguide-form-container">
  <textarea class="crux-textarea crux-textarea--error" placeholder="Placeholder text here" aria-label="Placeholder text here" aria-invalid=true aria-describedby="error-state-textarea">Filled in text here</textarea>
  <div class="crux-textarea-error-message" id="error-state-textarea">Error goes here</div>
</div>

Dropdown

Blank state

<div class="cr-styleguide-form-container">
    <div class="crux-dropdown">
      <input placeholder="Dropdown placeholder" aria-label="Dropdown placeholder">
      <button><i class="crux-icons crux-icons-caret-down-small"></i></button>
    </div>
</div>

Disabled state (dropdown with placeholder)

<div class="cr-styleguide-form-container">
    <div class="crux-dropdown crux-disabled">
      <input placeholder="Dropdown placeholder" aria-label="Dropdown placeholder" aria-disabled=true>
      <button><i class="crux-icons crux-icons-caret-down-small"></i></button>
    </div>
</div>

Disabled state (dropdown with value)

<div class="cr-styleguide-form-container">
    <div class="crux-dropdown crux-disabled">
      <input placeholder="Dropdown placeholder" value="Some Value" aria-label="Dropdown placeholder" and aria-disabled=true>
      <button><i class="crux-icons crux-icons-caret-down-small"></i></button>
    </div>
</div>

Focus state with many items

  • Some really long item to show how overflow works
  • Alabama
  • Alaska
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • Florida
  • Georgia
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
<div class="cr-styleguide-form-container">
    <div class="crux-dropdown">
      <input placeholder="Dropdown placeholder" value="Some Value" aria-label="Dropdown placeholder">
      <button><i class="crux-icons crux-icons-caret-down-small"></i></button>
      <ul>
        <li>Some really long item to show how overflow works</li>
        <li>Alabama</li>
        <li>Alaska</li>
        <li>Arizona</li>
        <li>Arkansas</li>
        <li>California</li>
        <li>Colorado</li>
        <li>Connecticut</li>
        <li>Delaware</li>
        <li>Florida</li>
        <li>Georgia</li>
        <li>Hawaii</li>
        <li>Idaho</li>
        <li>Illinois</li>
        <li>Indiana</li>
        <li>Iowa</li>
      </ul>
    </div>
</div>

Focus state with few items

  • Some really long item to show how overflow works
  • Alabama
  • Alaska
  • Arizona
  • Arkansas
  • California
<div class="cr-styleguide-form-container">
    <div class="crux-dropdown">
      <input placeholder="Dropdown placeholder" value="Some Value" aria-label="Dropdown placeholder">
      <button><i class="crux-icons crux-icons-caret-down-small"></i></button>
      <ul>
        <li>Some really long item to show how overflow works</li>
        <li>Alabama</li>
        <li>Alaska</li>
        <li>Arizona</li>
        <li>Arkansas</li>
        <li>California</li>
      </ul>
    </div>
</div>

Radio Button

Blank State

<div class="cr-styleguide-form-container">
  <div class="crux-radio">
    <label>
      <input type="radio" />
      <span class="crux-radio-button" role="radio" aria-checked=false aria-labelledby="radio-blank-state" tabindex="0"></span>
      <span class="crux-radio-label" id="radio-blank-state">
          Yearly
        </span>
    </label>
  </div>
</div>

Success State

<div class="cr-styleguide-form-container">
  <div class="crux-radio">
    <label>
      <input type="radio" checked=true />
      <span class="crux-radio-button" role="radio" checked=true aria-checked=true aria-labelledby="radio-success-state" tabindex="0"></span>
      <span class="crux-radio-label" id="radio-success-state">
          Monthly
        </span>
    </label>
  </div>
</div>

Disabled State

<div class="cr-styleguide-form-container">
  <div class="crux-radio">
    <label>
      <input type="radio" disabled=true />
      <span class="crux-radio-button" role="radio" aria-checked=false aria-disabled=true aria-labelledby="radio-disabled-state" tabindex="0"></span>
      <span  id="radio-disabled-state" class="crux-radio-label">
        Daily
      </span>
    </label>
  </div>
</div>

Check box

Blank state

<div class="cr-styleguide-form-container">
    <div class="crux-checkbox">
        <label>
            <input type="checkbox" />
            <span role="checkbox" aria-checked=false aria-labelledby="checkbox-blank-state" tabindex="0">
              <span class="crux-checkbox-label" id="checkbox-blank-state">
                Remember Me
              </span>
            </span>
        </label>
    </div>
</div>

Success state

<div class="cr-styleguide-form-container">
    <div class="crux-checkbox">
        <label>
            <input type="checkbox" checked=true />
            <span role="checkbox" aria-checked=true aria-labelledby="checkbox" tabindex="0">
              <span class="crux-checkbox-label" id="checkbox-success-state">
                Remember Me
              </span>
            </span>
        </label>
    </div>
</div>

Disabled black state

<div class="cr-styleguide-form-container">
    <div class="crux-checkbox">
        <label>
            <input type="checkbox" disabled=true />
            <span role="checkbox" aria-checked=false aria-disabled=true aria-labelledby="checkbox-disabled-state" tabindex="0">
              <span class="crux-checkbox-label" id="checkbox-disabled-state">
                Remember Me
              </span>
            </span>
        </label>
    </div>
</div>

Disabled success state

<div class="cr-styleguide-form-container">
    <div class="crux-checkbox">
        <label>
            <input type="checkbox" checked=true disabled=true />
            <span role="checkbox" aria-checked=true aria-disabled=true aria-labelledby="checkbox-disabled-success-state" tabindex="0">
              <span class="crux-checkbox-label" id="checkbox-disabled-success-state">
                Remember Me
              </span>
            </span>
        </label>
    </div>
</div>

Toggle Switch

Normal switch

US Canada
US Canada
US Canada
US Canada 
<div class="cr-styleguide-form-container">
  <div class="crux-toggle-switch">
    <span>
      US
    </span>
    <span role="checkbox" aria-checked=true aria-labelledby="checkbox-toggle-switch-normal-1" tabindex="0">
      <label>
          <input type="checkbox" checked>
          <span/>
      </label>
    </span>
    <span class="crux-active" id="checkbox-toggle-switch-normal-1">
      Canada
    </span>
  </div>
  <div class="crux-toggle-switch">
    <span class="crux-active">
      US
    </span>
    <span role="checkbox" aria-checked=false aria-labelledby="checkbox-toggle-switch-normal-2" tabindex="0">
      <label>
          <input type="checkbox">
          <span/>
      </label>
    </span>
    <span id="checkbox-toggle-switch-normal-2">
      Canada
    </span>
  </div>
  <div class="crux-toggle-switch crux-disabled">
    <span>
      US
    </span>
    <span role="checkbox" aria-checked=true aria-disabled=true aria-labelledby="checkbox-toggle-switch-normal-3" tabindex="0">
      <label>
          <input type="checkbox" checked disabled>
          <span/>
      </label>
    </span>
    <span class="crux-active" id="checkbox-toggle-switch-normal-3">
      Canada
    </span>
  </div>
  <div class="crux-toggle-switch crux-disabled">
    <span class="crux-active">
      US
    </span>
    <span role="checkbox" aria-checked=false aria-disabled=true aria-labelledby="checkbox-toggle-switch-normal-4" tabindex="0">
      <label>
          <input type="checkbox" disabled>
          <span/>
      </label>
    </span>
    <span id="checkbox-toggle-switch-normal-4">
      Canada
    </span>
  </div>
</div>

Special switch

US Canada
US Canada
US Canada
US Canada 
<div class="cr-styleguide-form-container">
  <div class="crux-toggle-switch crux-toggle-switch--special">
    <span>
      US
    </span>
    <span role="checkbox" aria-checked=true aria-labelledby="checkbox-toggle-switch-special-1" tabindex="0">
      <label>
          <input type="checkbox" checked>
          <span/>
      </label>
    </span>
    <span class="crux-active" id="checkbox-toggle-switch-special-1">
      Canada
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--special">
    <span class="crux-active">
      US
    </span>
    <span role="checkbox" aria-checked=false aria-labelledby="checkbox-toggle-switch-special-2" tabindex="0">
      <label>
          <input type="checkbox">
          <span/>
      </label>
    </span>
    <span id="checkbox-toggle-switch-special-2">
      Canada
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--special crux-disabled">
    <span>
      US
    </span>
    <span role="checkbox" aria-checked=true aria-disabled=true aria-labelledby="checkbox-toggle-switch-special-3" tabindex="0">
      <label>
          <input type="checkbox" checked disabled>
          <span/>
      </label>
    </span>
    <span class="crux-active" id="checkbox-toggle-switch-special-3">
      Canada
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--special crux-disabled">
    <span class="crux-active">
      US
    </span>
    <span role="checkbox" aria-checked=false aria-disabled=true aria-labelledby="checkbox-toggle-switch-special-4" tabindex="0">
      <label>
          <input type="checkbox" disabled>
          <span/>
      </label>
    </span>
    <span id="checkbox-toggle-switch-special-4">
      Canada
    </span>
  </div>
</div>

On/Off switch

Health Newsletter
Health Newsletter
Health Newsletter
Health Newsletter
Health Newsletter
Health Newsletter 
<div class="cr-styleguide-form-container">
  <div class="crux-toggle-switch crux-toggle-switch--on-off">
    <span role="checkbox" aria-checked=true aria-labelledby="checkbox-toggle-switch-normal--on-off-1" tabindex="0">
      <label>
          <input type="checkbox" checked>
          <span/>
      </label>
    </span>
    <span id="checkbox-toggle-switch-normal--on-off-1">
      Health Newsletter
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--on-off">
    <span role="checkbox" aria-checked=false aria-labelledby="checkbox-toggle-switch-normal--on-off-2" tabindex="0">
      <label>
          <input type="checkbox">
          <span/>
      </label>
    </span>
    <span id="checkbox-toggle-switch-normal--on-off-2">
      Health Newsletter
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--on-off">
    <span id="checkbox-toggle-switch-normal--on-off-3">
      Health Newsletter
    </span>
    <span role="checkbox" aria-checked=true aria-labelledby="checkbox-toggle-switch-normal--on-off-3" tabindex="0">
      <label>
          <input type="checkbox" checked>
          <span/>
      </label>
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--on-off">
    <span id="checkbox-toggle-switch-on-off-4">
      Health Newsletter
    </span>
    <span role="checkbox" aria-checked=false aria-labelledby="checkbox-toggle-switch-on-off-4" tabindex="0">
      <label>
          <input type="checkbox">
          <span/>
      </label>
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--on-off crux-disabled">
    <span id="checkbox-toggle-switch-normal--on-off-5">
      Health Newsletter
    </span>
    <span role="checkbox" aria-checked=true aria-disabled=true aria-labelledby="checkbox-toggle-switch-normal--on-off-5" tabindex="0">
      <label>
          <input type="checkbox" checked disabled>
          <span/>
      </label>
    </span>
  </div>
  <div class="crux-toggle-switch crux-toggle-switch--on-off crux-disabled">
    <span id="checkbox-toggle-switch-normal--on-off-6">
      Health Newsletter
    </span>
    <span role="checkbox" aria-checked=false aria-disabled=true aria-labelledby="checkbox-toggle-switch-normal--on-off-6" tabindex="0">
      <label>
          <input type="checkbox" disabled>
          <span/>
      </label>
    </span>
  </div>
</div>

Password field

Blank password field

<div class="cr-styleguide-form-container">
  <div class="crux-password-container">
    <input class="crux-password" type="password" placeholder="Password" aria-label="password" aria-required=true/>
    <button>Show</button>
  </div>
</div>

Password field (Hidden password mode)

<div class="cr-styleguide-form-container">
  <div class="crux-password-container">
    <input class="crux-password" type="password" value="Password1" placeholder="Password" aria-label="password" aria-required=true/>
    <button>Show</button>
  </div>
</div>

Password field (Shown password mode)

<div class="cr-styleguide-form-container">
  <div class="crux-password-container">
    <input class="crux-password" type="text" value="Password1" placeholder="Password" aria-label="password" aria-required=true/>
    <button>Hide</button>
  </div>
</div>

Disabled blank password field

<div class="cr-styleguide-form-container">
  <div class="crux-password-container crux-disabled">
    <input class="crux-password" type="password" placeholder="Password" aria-label="password" aria-required=true aria-disabled=true/>
    <button>Show</button>
  </div>
</div>

Disabled password field (Hidden password mode)

<div class="cr-styleguide-form-container">
  <div class="crux-password-container crux-disabled">
    <input class="crux-password" type="password" value="Password1" placeholder="Password" aria-label="password" aria-required=true aria-disabled=true/>
    <button>Show</button>
  </div>
</div>

Disabled password field (Shown password mode)

<div class="cr-styleguide-form-container">
  <div class="crux-password-container crux-disabled">
    <input class="crux-password" type="text" value="Password1" placeholder="Password" aria-label="password" aria-required=true aria-disabled=true/>
    <button>Hide</button>
  </div>
</div>

Iconography

We have created a font for our icon set.

The font can be downloaded for offline use by clicking here.

A reference PDF is available for download by clicking here.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

<button class="crux-btn crux-btn-special--sm" aria-label="Button Browse">
    <span class="crux-icons crux-icons-browse" aria-hidden="true"></span>
    <span>Browse</span>
</button>

<button class="crux-btn crux-btn-primary--sm" aria-label="Button Browse">
    <span class="crux-icons  crux-icons-recommended" aria-hidden="true"></span>
    <span>Recommended</span>
</button>

<button class="crux-btn crux-btn-tertiary--sm" aria-label="Button Browse">
    <span class="crux-icons  crux-icons-heart-fill" aria-hidden="true"></span>
    <span>Favorite</span>
</button>

  • crux-icons-account
  • crux-icons-audio
  • crux-icons-audio-off
  • crux-icons-best-buy
  • crux-icons-brands
  • crux-icons-browse
  • crux-icons-bullet
  • crux-icons-call
  • crux-icons-camera
  • crux-icons-caret-down-big
  • crux-icons-caret-down-small
  • crux-icons-caret-slider-left
  • crux-icons-caret-slider-right
  • crux-icons-caret-up-big
  • crux-icons-caret-up-small
  • crux-icons-chat
  • crux-icons-check
  • crux-icons-close
  • crux-icons-confirmation
  • crux-icons-cr
  • crux-icons-doc
  • crux-icons-dontbuy
  • crux-icons-download
  • crux-icons-excellent
  • crux-icons-facebook
  • crux-icons-fair
  • crux-icons-fall
  • crux-icons-filter
  • crux-icons-filter-compare
  • crux-icons-filter-grid
  • crux-icons-filter-list
  • crux-icons-flag
  • crux-icons-flag-fill
  • crux-icons-gallery
  • crux-icons-good
  • crux-icons-heart
  • crux-icons-heart-fill
  • crux-icons-help-information
  • crux-icons-key
  • crux-icons-less
  • crux-icons-location
  • crux-icons-lock
  • crux-icons-lock-open
  • crux-icons-lock-solid
  • crux-icons-lock-solid-open
  • crux-icons-mail
  • crux-icons-member-expert
  • crux-icons-menu
  • crux-icons-money
  • crux-icons-mpg-gas
  • crux-icons-pause
  • crux-icons-pinterest
  • crux-icons-play
  • crux-icons-plus
  • crux-icons-poor
  • crux-icons-print
  • crux-icons-question
  • crux-icons-rain
  • crux-icons-recall-warning
  • crux-icons-recently-viewed
  • crux-icons-recommended
  • crux-icons-search
  • crux-icons-selection
  • crux-icons-share
  • crux-icons-share2
  • crux-icons-shopping-cart
  • crux-icons-sms
  • crux-icons-star
  • crux-icons-sun
  • crux-icons-swipe
  • crux-icons-thumbs-down
  • crux-icons-thumbs-up
  • crux-icons-twitter
  • crux-icons-upload
  • crux-icons-verygood
  • crux-icons-winter
  • crux-icons-youtube
  • crux-icons-add

Character Mappings

©  Consumer Reports