Base
- Basic Page - Generic
- Button
- Colors
- Grid
- Icon
- Spacing
- Typography
- Wysiwyg

Carousel Items
- Product Carousel item
- Product Infos
- Product Rating
- Promotion Snipe

Components
- Address Display
- Apple Header
- Breadcrumb
- Bullet
- Coverage
- CTA List
- FAQ
- Footer
- Header content
- Home Header
- Information List
- Line Selector Tool
- Mobile Subnav CTA
- Navigation
- Plan Price
- Product Carousel
- Product Cross Sell
- Row Wrapper
- Secondary CTA
- Secondary CTA Left-aligned
- Separator
- Social Link
- Title with Arrowed CTA
- Titled List

Forms
- Device Support Compatibility
- Newsletter
- Qualifier tool

Single Component
- Arrowed CTA
- Collapse
- CTA List - Single
- How to Steps - Item
- How to Steps - List
- Information Item
- Product Cross Sell - Item
- Searchbar

Prototype

Basic Page - Generic

Here is an example of a template for basic pages.

Demo

    



    
    
    

    

    
       
    

    

    
    



x
 
<!--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="U.S. Cellular">
    <meta name="keywords" content="Cellular, Network, USC, Mobile, Plans">
    <meta name="description" content="">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="msapplication-config" content="./assets/images/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <meta property="og:image" content="./assets/images/usc-.jpg">
    <meta property="og:image:height" content="268">
    <meta property="og:image:width" content="512">
    <meta property="og:description" content="">
    <meta property="og:title" content="">
    <meta property="og:url" content="http://www.uscellular.com/">
    <title> - U.S. Cellular </title>
    <link href="./vendors.min.css" type="text/css" rel="stylesheet" />
    <link href="./hub.vendors.min.css" type="text/css" rel="stylesheet" />
    <link href="./hub.min.css" type="text/css" rel="stylesheet" />
    <link href="./patterns.min.css" type="text/css" rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png">
    <link rel="manifest" href="./assets/images/site.webmanifest">
    <link rel="mask-icon" href="./assets/images/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="./assets/images/favicon.ico">
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="./vendors.min.js"></script>
    <script src="./hub.vendors.min.js"></script>
</head>
-->
<!-- <body> -->
    <!-- if is Home page -->
    <div class="usc-page-background" style="background-image: url('assets/images/Homepage_Desktop_HeaderImage.png')"></div>
    <!-- end if is Home page -->
    <!-- include navigation template -->
    <main class="usc-wrapper main-nav-spacer" id="main" role="main" tabindex="-1" aria-label="Main Content">
       <!-- Content goes here -->
    </main>
    <!-- include footer template -->
    <script src="./patterns.min.js"></script>
    <script src="./hub.min.js"></script>
<!-- </body> -->
<!-- </html> -->

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="U.S. Cellular">
    <meta name="keywords" content="Cellular, Network, USC, Mobile, Plans">
    <meta name="description" content="">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="msapplication-config" content="./assets/images/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <meta property="og:image" content="./assets/images/usc-.jpg">
    <meta property="og:image:height" content="268">
    <meta property="og:image:width" content="512">
    <meta property="og:description" content="">
    <meta property="og:title" content="">
    <meta property="og:url" content="http://www.uscellular.com/">
    <title> - U.S. Cellular </title>
    <link href="./vendors.min.css" type="text/css" rel="stylesheet" />
    <link href="./hub.vendors.min.css" type="text/css" rel="stylesheet" />
    <link href="./hub.min.css" type="text/css" rel="stylesheet" />
    <link href="./patterns.min.css" type="text/css" rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png">
    <link rel="manifest" href="./assets/images/site.webmanifest">
    <link rel="mask-icon" href="./assets/images/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="./assets/images/favicon.ico">
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="./vendors.min.js"></script>
    <script src="./hub.vendors.min.js"></script>
</head>
<body>
    <!-- if is Home page -->
    <div class="usc-page-background" style="background-image: url('assets/images/Homepage_Desktop_HeaderImage.png')"></div>
    <!-- end if is Home page -->

    <!-- include navigation template -->

    <main class="usc-wrapper main-nav-spacer" id="main" role="main" tabindex="-1" aria-label="Main Content">
       <!-- Content goes here -->
    </main>

    <!-- include footer template -->

    <script src="./patterns.min.js"></script>
    <script src="./hub.min.js"></script>
</body>
</html>

Style Customization

CSS Classes

CSS Class	Description
`usc-page-background`	Optional. The wrapper of background image in home page template. Use when home-header component is the first element in .usc-wrapper. Apply .main-nav-spacer to .usc-wrapper for adding space.
`usc-wrapper`	Mandatory. The container of the main content.
`main-nav-spacer`	Optional. Add spacing between main navigation bar and the main content.

Button

Only one button should be used per content module. Only one button should be used per content module.

Demo

Primary button

    Primary button
 
<a href="#" class="usc-button" data-alpha=""><span class="usc-button__text">Primary button</span></a>

I am a outlineaccessible label

    I am a outlineaccessible label
 
<a href="#" class="usc-button" data-outline=""><span class="usc-button__text">I am a outline<span class="visuallyhidden">accessible label</span></span></a>

I am a outline

    I am a outline
 
<a href="#" class="usc-button" data-outline-white=""><span class="usc-button__text">I am a outline</span></a>

Tag

    I am a outlineaccessible label
 
<a href="#" class="usc-button" data-outline=""><span class="usc-button__text">I am a outline<span class="visuallyhidden">accessible label</span></span></a>

Basic Usage

NOTE: Examples here use the generic <a>, but users can also apply the usc-button class to <button> elements or even to a <span> element if the button isn't clickable.

Style guide recommendations

Only one button should be used per content module.

Variants

Outline Button

To style a button with a transparent background and some outline as border, add the data-outline attribute to the <a>.

<a href="#" class="usc-button" data-outline>
  Outline button
</a>

White Outline Button

To style a button with a transparent background and some white outline as border, add the data-outlineWhite attribute to the <a>.

<a href="#" class="usc-button" data-outlineWhite>
  Transparent button
</a>

Tag Button

To style a tag button, add the data-tag to the <a>.

<a href="#" class="usc-button" data-tag>
  Tag button
</a>

Icons

To add an SVG icon, add the component tag with the usc-icon class inside the button element and set the attribute aria-hidden="true" if needed.

<a href="#" class="usc-button">
  Button
  <span class="usc-icon usc-icon--arrow-right-btn" aria-hidden="true">
    <svg class="usc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
      ...
    </svg>
  </span>
</a>

Accessibility

For accessibility reason, it's possible to add a visuallyhidden span right next to the label to precise what the button is about. ie, if we have a "Shop Now" button, we should have a invisible span next to it that should say " a brand new iPhone xs".

<a href="#" class="usc-button">
  Shop Now
  <span class="visuallyhidden"> a brand new iPhone XS </span>
  <span class="usc-icon usc-icon--arrow-right-btn" aria-hidden="true">
    <svg class="usc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
      ...
    </svg>
  </span>
</a>

Style guide recommendations

Each module should contain no more than one single usc-button button.

Style Customization

CSS Classes

CSS Class	Description
`usc-button`	Mandatory. Defaults primary button.
`visuallyhidden`	Optional. Add more text to the button for screen-reader.

CSS Attributes

CSS Attribute	Description
`data-outline`	Optional. Styles a transparent button.
`data-outlineWhite`	Optional. Styles a button with outline button.
`data-tag`	Optional. Styles a label with rounded corner borders.

Colors

The color scheme. Each color has its class for adding text-color or background-color to an element. Color in this list can be used for class naming : usc-hero-blue,white, black, blue, blue-link, blue-light, blue-hover, gray, light, dark-gray, light-gray, error

Demo

#0065A4 usc-hero-blue

#ffffff white

#000000 black

#0070F0 blue

#006BE6 blue-link

#278CFF blue-light

#0041C2 blue-hover

#dadada gray

#f6f6f6 light

#545454 dark-gray

#E2E2E2 light-gray

#E02E3F error

Black text on gray background

White text on blue background

Basic usage

<div class="usc-txt-color-white usc-bg-color-blue">
    <span>White text on blue background</span>
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-txt-color-{{color name}}`	Optional. Add text-color to the element.
`usc-bg-color-{{color name}}`	Optional. Add background-color to the element.

Grid

Columns based layout only if needed. Based on a 12 columns grid, like Bootstrap.

Demo

1 column layout

    
    1 column layout

 
<div class="usc-grid">
    <div class="usc-grid__col col-12">1 column layout</div>
</div>

2 columns layout

    
    2 columns layout
    2 columns layout

 
<div class="usc-grid">
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-6 usc-grid__col--lg-6">2 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-6 usc-grid__col--lg-6">2 columns layout</div>
</div>

3 columns layout

    
    3 columns layout
    3 columns layout
    3 columns layout

 
<div class="usc-grid">
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-4 usc-grid__col--lg-4">3 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-4 usc-grid__col--lg-4">3 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-4 usc-grid__col--lg-4">3 columns layout</div>
</div>

4 columns layout

    
    4 columns layout
    4 columns layout
    4 columns layout
    4 columns layout

 
<div class="usc-grid">
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-3 usc-grid__col--lg-3">4 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-3 usc-grid__col--lg-3">4 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-3 usc-grid__col--lg-3">4 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-3 usc-grid__col--lg-3">4 columns layout</div>
</div>

5 columns layout

    
    5 columns layout
    5 columns layout
    5 columns layout
    5 columns layout
    5 columns layout

 
<div class="usc-grid">
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">5 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">5 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">5 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">5 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">5 columns layout</div>
</div>

6 columns layout

    
    6 columns layout
    6 columns layout
    6 columns layout
    6 columns layout
    6 columns layout
    6 columns layout

 
<div class="usc-grid">
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">6 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">6 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">6 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">6 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">6 columns layout</div>
    <div class="usc-grid__col usc-grid__col--sm-6 usc-grid__col--md-2 usc-grid__col--lg-2">6 columns layout</div>
</div>

Style Customization

Sass Variables

Sass Variable	Description
`usc-grid`	Mandatory. Defines the container layout.
`usc-grid__col`	Mandatory. Defines the type of display for each column.
`usc-grid__col--sm-3`	Optional. Example of column with 25% width over 768px.
`usc-grid__col--md-3`	Optional. Example of column with 25% width over 992px.
`usc-grid__col--lg-3`	Optional. Example of column with 25% width over 1200px.

Icons

Icons are SVG based images. They can be used either as a background-image or as a graphic in a button.

Demo

account

arrow-btn-left

arrow-btn-right

arrow-big-left

arrow-big-right

Shopping Cart. You have items.

cart

coverage

close

facebook

location

setting

star

store-finder

search

twitter

play

youtube

    
    


 
<span class="usc-icon usc-icon--account " aria-hidden="true">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.5 70.3"><defs></defs><title>MyAccount_USCIcon</title><path d="M68.7,60.25,47.4,48.05c-.2-.3-.3-.5-.5-.8v-6.4c.2-.2.2-.5.3-.7A15.94,15.94,0,0,0,51.9,30h0V16.55h0v-.8c0-8.5-7.5-15.7-16.7-15.7S18.5,7.25,18.5,16v.8h0v13.4h0a14.23,14.23,0,0,0,4.7,10.2c.2.2.2.5.3.7v6.4c-.2.3-.3.5-.5.8l-21.3,12L0,62v7.4l1,1H69.5l1-1V62Z" transform="translate(0 -0.05)"></path></svg>
</span>

Basic Usage

HTML Structure

<span class="usc-icon usc-icon--arrow-btn-right" aria-hidden="true">
    <svg>...</svg>
</span>

Style guide recommendations

Use default blue color #0065A4 for svg filling, or apply usc-icon--white to reverse out in white.
Icons must be from USC icon library, or must be approved by brand team before use.

Style Customization

CSS Classes

CSS Class	Description
`usc-icon`	Mandatory. Defaults icon class for basic styling. (Default color)
`usc-icon--white`	Optional. Reverse icon filling in white color.

CSS Attributes

CSS Attribute	Description
`aria-hidden`	Mandatory. Accessibility purpose for screen readers.

Spacing

Helper classes for applying a certain amount of margin or spacing to the element. Available amounts of spacing are 10, 20, 40, 80, 160 (in px). Margin or padding can be applied in one particular direction only top, right, bottom, left.

Demo

Padding

Margin

Padding left

Margin right

Padding bottom

Margin top

Basic usage

<div class="usc-padding-80">
    padding
    <div class="usc-margin-40">
        margin
    </div>
</div>

<div class="usc-padding-bottom-80">
    padding bottom
    <div class="usc-margin-top-40">
        margin top
    </div>
</div>

<div class="usc-padding-left-80">
    padding left
    <div class="usc-margin-right-40">
        margin right
    </div>
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-margin-{{amount}}`	Optional. Add the amount of margin globally to the element.
`usc-padding-{{amount}}`	Optional. Add the amnount of padding globally to the element.
`usc-margin-{{ top, right, bottom, left}}-{{amount}}`	Optional. Add the amount of margin only in the direction set.
`usc-padding-{{ top, right, bottom, left}}-{{amount}}`	Optional. Add the amount of padding only in the direction set.

Typography

Class to add to HTML Element to display some basic style.

Demo

font-size - line-height: mobile => 24px - 28px // tablet => 45px - 50px // desktop => 54px - 58px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

Subhead

font-size - line-height: mobile => 18px - 22px // tablet,desktop => 36px - 28px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

Body (outside Wysiwyg)

font-size - line-height: mobile => 16px - 20px // tablet,desktop => 22px - 26px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

Breadcrumb

font-size - line-height: mobile => 12px - 12px // tablet,desktop => 16px - 17px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

Style Customization

Custom Class

Class Name	Description
`usc-typography__header`	Header text styling.
`usc-typography__subheader`	Subheader text styling.
`usc-typography__breadcrumb`	Breadcrumb text styling.

Accessibility

To style a heading tag, you can add any heading typography class. For the sake of accessibility and semantic, the class should be independent from the tag. For example, a <h1> tag could have a usc-typography__subheader class.

Wysiwyg

All typographic styles used inside a WYSIWYG context. The WYSIWYG editor should support custom class to defined how to align items, the background-color and text-color and the heading type.

Demo

Text align on left

    
    
        
            Text align on left
        
    

 
<div class="usc-wysiwyg">
    <div class="usc-wysiwyg__wrapper">
        <div class="usc-wysiwyg__text">
            <div class="ta-left">Text align on left</div>
        </div>
    </div>
</div>

Text align on center

Text align on right

White background ( default )

Blue background

    
    
        
            
                Blue background
            
        
    

 
<div class="usc-wysiwyg">
    <div class="usc-wysiwyg__wrapper">
        <div class="usc-wysiwyg__text">
            <div class="bg-blue usc-wysiwyg__wrapper">
                Blue background
            </div>
        </div>
    </div>
</div>

Gray background

White Text on blue background

Blue Color

Gray Color

Black Color

H1 Heading
font-size - line-height: mobile => 24px - 28px // tablet => 40px - 46px // desktop => 54px - 58px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

H2 Heading
font-size - line-height: mobile => 18px - 22px // tablet => 24px - 30px // desktop => 35px - 40px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

H3 Heading
font-size - line-height: mobile => 18px - 22px // tablet => 22px - 26px // desktop => 22px - 26px
font-family: "Stag Sans", sans-serif
font-weight: 600

H4 Heading
font-size - line-height: mobile => 18px - 22px // tablet => 24px - 28px // desktop => 24px - 28px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

H5 Heading
font-size - line-height: mobile => 20px - 31px // tablet => 20px - 31px // desktop => 20px - 31px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

H6 Heading
font-size - line-height: mobile => 20px - 26px // tablet => 20px - 26px // desktop => 20px - 26px
font-family: "Stag Sans", sans-serif
font-weight: 700

Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. strong - Suspendisse vestibulum pharetra imperdiet. Ut aliquam tortor a felis fermentum tincidunt eget eu ex.

italic - Ut porta mauris ut est commodo commodo. Suspendisse blandit, orci eu finibus aliquam, risus neque aliquet velit, eget malesuada lacus dui eget orci.

font-size - line-height: mobile => 16px - 24px // tablet,desktop => 22px - 28px
font-family: "Stag Sans", sans-serif
font-weight: 300

Body strong
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

Body italic
font-family: "Stag Sans", sans-serif
font-weight: 300
font-style: italic

Intro body - Suspendisse blandit, orci eu finibus aliquam, risus neque aliquet velit, eget malesuada lacus dui.

font-size - line-height: mobile => 18px - 22px // tablet,desktop => 26px - 30px
font-family: "Stag Sans Book", "Stag Sans", sans-serif
font-weight: 400

Legal body - Suspendisse blandit, orci eu finibus aliquam, risus neque aliquet velit, eget malesuada lacus dui

font-size - line-height: mobile => 12px - 16px // tablet,desktop => 16px - 20px
font-family: "Stag Sans", sans-serif
font-weight: 300

Initialize the wysiwyg

Wysiwyg

The wysiwyg should add by default a usc-wysiwyg class around the content. We need it to use any of the wysiwyg styling.

<div class="usc-wysiwyg">
    <!-- content of the wysiwyg -->
</div>

Wysiwyg Wrapper

Add some padding and a max-width around the content.

<div class="usc-wysiwyg">
    <div class="usc-wysiwyg__wrapper">
        Add padding around the component.
    </div>
</div>

Align items

Left

To align items on the left, wrap the element inside a wrapper with the ta-left class.

<div class="ta-left">
    Text to align on the left
</div>

Center

To align items on the center, wrap the element inside a wrapper with the ta-center class.

<div class="ta-center">
    Text to align on the center
</div>

Right

To align items on the right, wrap the element inside a wrapper with the ta-right class.

<div class="ta-right">
    Text to align on the right
</div>

Background color

The default background-color is white, but it can be overwrite by adding a background class to a section.

White Background

To have a white background, use the bg-white class on the wrapper div.

<div class="bg-white">
    White background-color
</div>

Blue Background

To have a blue background, use the bg-blue class on the wrapper div.

<div class="bg-blue">
    Blue background-color
</div>

Gray Background

To have a gray background, use the bg-gray class on the wrapper div.

<div class="bg-gray">
    Gray background-color
</div>

Text color

White Color

To have a white text, use the txt-white class on the wrapper div or any text element.

<div class="txt-white">
    White text color
</div>

Blue Color

To have a blue text, use the txt-blue class on the wrapper div or any text element.

<div class="txt-blue">
    Blue text color
</div>

Gray Color

To have a gray text, use the txt-gray class on the wrapper div or any text element.

<div class="txt-gray">
    Gray text color
</div>

Black Color

To have a black text, use the txt-black class on the wrapper div or any text element.

Note: The black text is the default one.

<div class="txt-black">
    Black text color
</div>

Accessibility

To style a heading tag, you can add any heading class from h1-heading up to h6-heading. For the sake of accessibility and semantic, the class should be independent from the tag. For example, a <h3> tag could have a h1-heading class.

Product Carousel item - Product Slide

A product that will display as a slide into the carousel.

Demo

        
    
        
            
            Apple iPhone XR
$XX/mo.
Reg $XX/mo.
Rated 4 out of 5 based on 45 users
            
        
        
            
        
        
            
            Shop Now
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.
        
    


    
x
 
<a class="usc-product-carousel-item" href="http://" tabindex="0" role="button">
    <div class="usc-product-carousel-item__content">
        <header class="usc-product-carousel-item__header">
            <!-- include product-infos template -->
            <div class="usc-product-infos"><h3 class="usc-product-infos__name">Apple iPhone XR</h3><div class="usc-product-infos__current-price">$XX/<abbr title="month">mo</abbr>.</div><div class="usc-product-infos__regular-price"><abbr title="Regular">Reg</abbr> $XX/<abbr title="month">mo</abbr>.</div><!-- include product-rating template --><div class="usc-product-rating"><div class="usc-product-rating__list" aria-hidden="true"><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--outline" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span></div><p class="usc-product-rating__number"><span class="visuallyhidden">Rated 4 out of 5 based on </span>45<span class="visuallyhidden"> users</span></p></div></div>
            <!-- end product-infos template -->
        </header>
        <figure class="usc-product-carousel-item__figure">
            <img class="usc-product-carousel-item__image" src="./assets/images/cell.jpg" alt="Apple iPhone XR">
        </figure>
        <footer class="usc-product-carousel-item__footer">
            <!-- include button CTA template -->
            <span class="usc-button" data-outline=""><span class="usc-button__text">Shop Now</span></span>
            <p class="usc-product-carousel-item__legal">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
        </footer>
    </div>
</a>

        
    
        
        Limited time
        
            
            Apple iPhone XR
$XX/mo.
Reg $XX/mo.
Rated 4 out of 5 based on 45 users
            
        
        
            
        
        
            
            Shop Now
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.
        
    


    
 
<a class="usc-product-carousel-item" href="http://" tabindex="0" role="button">
    <div class="usc-product-carousel-item__content">
        <!-- include promotion-snipe template -->
        <div class="usc-promotion-snipe" data-corner=""><div class="usc-promotion-snipe__wrapper">Limited time</div></div>
        <header class="usc-product-carousel-item__header">
            <!-- include product-infos template -->
            <div class="usc-product-infos"><h3 class="usc-product-infos__name">Apple iPhone XR</h3><div class="usc-product-infos__current-price">$XX/<abbr title="month">mo</abbr>.</div><div class="usc-product-infos__regular-price"><abbr title="Regular">Reg</abbr> $XX/<abbr title="month">mo</abbr>.</div><!-- include product-rating template --><div class="usc-product-rating"><div class="usc-product-rating__list" aria-hidden="true"><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--outline" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span></div><p class="usc-product-rating__number"><span class="visuallyhidden">Rated 4 out of 5 based on </span>45<span class="visuallyhidden"> users</span></p></div></div>
            <!-- end product-infos template -->
        </header>
        <figure class="usc-product-carousel-item__figure">
            <img class="usc-product-carousel-item__image" src="./assets/images/cell.jpg" alt="Apple iPhone XR">
        </figure>
        <footer class="usc-product-carousel-item__footer">
            <!-- include button CTA template -->
            <span class="usc-button" data-outline=""><span class="usc-button__text">Shop Now</span></span>
            <p class="usc-product-carousel-item__legal">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
        </footer>
    </div>
</a>

        
    
        
        20% off
        
            Get iPhone XR and save half.
        
        
            
        
        
            
            Shop Now
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.
        
    


    
 
<a class="usc-product-carousel-item" href="http://" tabindex="0" role="button">
    <div class="usc-product-carousel-item__content">
        <!-- include promotion-snipe template -->
        <div class="usc-promotion-snipe" data-ribbon=""><div class="usc-promotion-snipe__wrapper">20% off</div></div>
        <header class="usc-product-carousel-item__header">
            <h2 class="usc-product-carousel-item__title">Get iPhone XR and save half.</h2>
        </header>
        <figure class="usc-product-carousel-item__figure">
            <img class="usc-product-carousel-item__image" src="./assets/images/cell2.jpg" alt="Apple iPhone XR">
        </figure>
        <footer class="usc-product-carousel-item__footer">
            <!-- include button CTA template -->
            <span class="usc-button" data-outline=""><span class="usc-button__text">Shop Now</span></span>
            <p class="usc-product-carousel-item__legal">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
        </footer>
    </div>
</a>

NOTE: Container .usc-promotion-snipe--ribbon > .usc-promotion-snipe__wrapper text content can extend up to full slide inner width.

Style Customization

CSS Classes

CSS Class	Description
`usc-product-carousel-item`	Mandatory. Wrapper for component.
`usc-product-carousel-item__content`	Mandatory. Wrapper for the content of the component.
`usc-promotion-snipe`	Optional. Display a promotions ribbon. attribute required
`usc-product-carousel-item__header`	Mandatory. Wrapper for the general product information .
`usc-product-carousel-item__title`	Optional. Title of the product promotion.
`usc-promotion-snipe__wrapper`	Mandatory. Wrapper for the pop-up part of the modal component.
`usc-product-infos`	Mandatory. Wrapper for the general product information .
`usc-product-infos__name`	Optional. The name of the product.
`usc-product-infos__current-price`	Optional. The price of the product.
`usc-product-infos__regular-price`	Optional. The regular price of the product without any promotion.
`usc-product-carousel-item__figure`	Mandatory. The wrapper for the product image.
`usc-product-carousel-item__image`	Mandatory. The product image.
`usc-product-carousel-item__footer`	Mandatory. The wrapper for the CTA.
`usc-product-carousel-item__legal`	Optional. The legal text for the promotion.

Attributes

Include	Description
`data-corner`	Mandatory. Use on `usc-promotion-snipe` to have the 45 degree banner on the corner top-right of the product.
`data-ribbon`	Mandatory. Use on `usc-promotion-snipe` to have the small ribon on the top right corner of the product.

Product Infos - Product Header

The product header information component is a component that display the main information of the product into a header. It is used inside the product-carousel-item component.

Demo

Apple iPhone XR

$XX/mo.

Reg $XX/mo.

Rated 4 out of 5 based on 45 users

        
    Apple iPhone XR
    $XX/mo.
    Reg $XX/mo.
    
    
    
    
    
        Rated 4 out of 5 based on 45 users

    
 
<div class="usc-product-infos">
    <h3 class="usc-product-infos__name">Apple iPhone XR</h3>
    <div class="usc-product-infos__current-price">$XX/<abbr title="month">mo</abbr>.</div>
    <div class="usc-product-infos__regular-price"><abbr title="Regular">Reg</abbr> $XX/<abbr title="month">mo</abbr>.</div>
    <!-- include product-rating template -->
    <div class="usc-product-rating">
    <div class="usc-product-rating__list" aria-hidden="true">
<span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--outline" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span>    </div>
    <p class="usc-product-rating__number">
        <span class="visuallyhidden">Rated 4 out of 5 based on </span>45<span class="visuallyhidden"> users</span></p>
</div></div>

Style Customization

CSS Classes

CSS Class	Description
`usc-product-infos`	Mandatory. Wrapper for component.
`usc-product-infos__name`	Mandatory. Name of the product.
`usc-product-infos__current-price`	Mandatory. Display the current price of the product.
`usc-product-infos__regular-price`	Optional. Display the regular price before any promotion of the product.

Product Carousel - Item Rating

The product rating component is a small component that show the rating of a product with five small stars.

Demo

Rated 4 out of 5 based on 45 users

    
    
    
    
        Rated 4 out of 5 based on 45 users

 
<div class="usc-product-rating">
    <div class="usc-product-rating__list" aria-hidden="true">
<span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--outline" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span>    </div>
    <p class="usc-product-rating__number">
        <span class="visuallyhidden">Rated 4 out of 5 based on </span>45<span class="visuallyhidden"> users</span></p>
</div>

NOTE: An aria-hidden="true" has been added for accessibility purpose since the icon div are not usefull for people who can't see it.

NOTE: Two visuallyhidden span have been added to the usc-product-rating__number div to be more specific for screen-reader.

Style Customization

CSS Classes

CSS Class	Description
`usc-product-rating`	Mandatory. Wrapper of the component.
`usc-product-rating__list`	Mandatory. List of 5 stars icon.
`usc-product-rating__star`	Mandatory. Styling for each star icon.

Promotion snipe

The promotion snipe is either a horizontal ribbon or a corner wrap that will appear on the top right of a product tile within a carousel. The horizontal ribbon version can grow to accommodate longer messages, but character count shouldn’t exceed 17 characters with spaces. It is optional, since not all products will have a promotion. To use it, it will need to use the data-corner or thedata-ribbonattribute.

Demo

20% OFF

        
    20% OFF

    
 
<div class="usc-promotion-snipe" data-ribbon="">
    <div class="usc-promotion-snipe__wrapper">20% OFF</div>
</div>

limited time

        
    limited time

    
 
<div class="usc-promotion-snipe" data-corner="">
    <div class="usc-promotion-snipe__wrapper">limited time</div>
</div>

Basic Usage

HTML Structure

<div class="usc-promotion-snipe" data-ribbon>
    <div class="usc-promotion-snipe__wrapper">
        20% OFF
    </div>
</div>

Note: The data-ribbon attribute is required for the ribbon style.

Variants

<div class="usc-promotion-snipe" data-corner>
    <div class="usc-promotion-snipe__wrapper">
        Limited Time
    </div>
</div>

Note: The data-corner attribute is required for 45 degree banner style.

Style Customization

CSS Classes

CSS Class	Description
`usc-promotion-snipe`	Mandatory. Wrapper of the component.
`usc-promotion-snipe__wrapper`	Mandatory. Wrapper of the text for the promotion.

HTML Attribute	Description
`data-ribbon`	Add to `usc-promotion-snipe` to style it with a ribbon.
`data-corner`	Add to `usc-promotion-snipe` to style it to be a 45 degree banner.

Address Display

The Address display component it used to display 2 address blocks side by side.

Demo

Submit PO Invoices to:

U.S. Cellular

PO Box 628430

Middleton, WI 53562-8430

Submit Non-PO Invoices to:

U.S. Cellular

PO Box 620989

Middleton, WI 53562-0989

    
    
        
            Submit PO Invoices to:
            U.S. Cellular
            PO Box 628430
            Middleton, WI 53562-8430
        
        
            Submit Non-PO Invoices to:
            U.S. Cellular
            PO Box 620989
            Middleton, WI 53562-0989
        
    

 
<div class="usc-address-display" itemprop="location" itemtype="http://schema.org/Place">
    <div class="usc-address-display__content">
        <address class="usc-address-display__address">
            <p class="usc-address-display__label">Submit <abbr title="Purchase Order">PO</abbr> Invoices to:</p>
            <p>U.S. Cellular</p>
            <p><abbr title="Post Office">PO</abbr> Box 628430</p>
            <p>Middleton, WI 53562-8430</p>
        </address>
        <address class="usc-address-display__address">
            <p class="usc-address-display__label">Submit Non-<abbr title="Purchase Order">PO</abbr> Invoices to:</p>
            <p>U.S. Cellular</p>
            <p><abbr title="Post Office">PO</abbr> Box 620989</p>
            <p>Middleton, WI 53562-0989</p>
        </address>
    </div>
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-address-display`	Mandatory. Wrapper of the component.
`usc-address-display__content`	Mandatory. Wrapper of content for the component.
`usc-address-display__address`	Mandatory. The section with the adress to display.
`usc-address-display__label`	Mandatory. The title of the section.

Apple Header

This component display some phone information and have the possibility to add a Call To Action next to it. It can display the phone name or an image of the phone name as the page heading tag h1, the phone visual and an optional call to action button.

Demo

iPhone XR

Shop iPhone Xr

        


    
        
            Phone
        
    



    
        
            
                iPhone XR
            
        
        
            
        
        
            
            Shop iPhone Xr        
    



    
 
<div class="usc-apple-header">
<!-- breadcrumb template -->
    <nav class="usc-breadcrumb" data-dark="" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <span class="usc-breadcrumb__item">Phone</span>
        </div>
    </nav>
<!-- end breadcrumb template -->
    <div class="usc-apple-header__content">
        <div class="usc-apple-header__product-name">
            <h1 class="usc-apple-header__heading">
                iPhone XR
            </h1>
        </div>
        <div class="usc-apple-header__product-display">
            <img class="usc-apple-header__product-display-image" src="./assets/images/product-header-visual.png" alt="iPhone XR visual">
        </div>
        <div class="usc-apple-header__cta">
            <!-- button template -->
            <a href="/" class="usc-button" data-outline=""><span class="usc-button__text">Shop iPhone&nbsp;X<span style="font-variant: small-caps;">r</span></span></a>        </div>
    </div>
</div>

iPhone XR

Shop iPhone Xr

        


    
        
            Phone
        
    



    
        
            
                
                iPhone XR
            
        
        
            
        
        
            
            Shop iPhone Xr        
    



    
 
<div class="usc-apple-header" data-dark="">
<!-- breadcrumb template -->
    <nav class="usc-breadcrumb" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <span class="usc-breadcrumb__item">Phone</span>
        </div>
    </nav>
<!-- end breadcrumb template -->
    <div class="usc-apple-header__content">
        <div class="usc-apple-header__product-name">
            <h1 class="usc-apple-header__heading">
                <img src="./assets/images/product-header-img-title.png" aria-hidden="true" alt="iPhone XR">
                <span class="usc-apple-header__image-title">iPhone XR</span>
            </h1>
        </div>
        <div class="usc-apple-header__product-display">
            <img class="usc-apple-header__product-display-image" src="./assets/images/product-header-visual.png" alt="iPhone XR visual">
        </div>
        <div class="usc-apple-header__cta">
            <!-- button template -->
            <a href="/" class="usc-button" data-outline-white=""><span class="usc-button__text">Shop iPhone&nbsp;X<span style="font-variant: small-caps;">r</span></span></a>        </div>
    </div>
</div>

Style guide recommendations

Apple Header content must visually be stacked right after the main navigation.

Note: The breadcrumb should also have a data-dark attributes next to the usc-breadcrumb class to have a dark text on the light background.

Theme Variants

Dark Theme

To style the component with a black background and white text. Add the data-dark attributes to the usc-apple-header class.

Note: The Breadcrumb shouldn't have a data-dark attribute here, since it should have a white text and not the black one.

Headline Variants

Picture of the name

To have the phone name image as the main title of the header, we need to add the following code to the h1

<h1 class="usc-apple-header__heading" tabindex="0">
    <img src="./assets/images/product-header-img-title.png" aria-hidden="true" alt="iPhone XR">
    <span class="usc-apple-header__image-title">iPhone XR</span>
</h1>

Text has title

To have the phone name as text as the main title of the header, we need to display only the text content inside the h1

<h1 class="usc-apple-header__heading" tabindex="0">
    iPhone XR
</h1>

Style Customization

CSS Classes

CSS Class	Description
`usc-apple-header`	Mandatory. The wrapper of the component.
`usc-apple-header__content`	Mandatory. The container of the content of the component.
`usc-apple-header__product-name`	Mandatory. The div that contain the product name and display it as a h1.
`usc-apple-header__heading`	Mandatory. The styling of the phone title.
`usc-apple-header__product-display`	Mandatory. Wrapper to display the image properly.
`usc-apple-header__product-display-image`	Mandatory. The image of the product.
`usc-apple-header__cta`	optional. The CTA button.

For all pages except the homepage, the breadcrumb displays at the top of a page to inform user where they are on the website. The breadcrumb should display only the current and previous page.

Demo

            
        
            
                
                    Plans
                
                
                    Unlimited Data With Payback
                
            
        
    


    
 
    <nav class="usc-breadcrumb" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <ul class="usc-breadcrumb__list">
                <li class="usc-breadcrumb__item">
                    <a href="#">Plans</a>
                </li>
                <li class="usc-breadcrumb__item">
                    <span>Unlimited Data With Payback</span>
                </li>
            </ul>
        </div>
    </nav>

            
        
            
                
                    Plans
                
                
                    Unlimited Data With Payback
                
            
        
    


    
 
    <nav class="usc-breadcrumb" data-dark="" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <ul class="usc-breadcrumb__list">
                <li class="usc-breadcrumb__item">
                    <a href="#">Plans</a>
                </li>
                <li class="usc-breadcrumb__item">
                    <span>Unlimited Data With Payback</span>
                </li>
            </ul>
        </div>
    </nav>

Basic Usage

HTML Structure

Parent page item only

<nav class="usc-breadcrumb" aria-label="Breadcrumb">
    <div class="usc-breadcrumb__wrapper">
        <span class="usc-breadcrumb__item">
            Home
        </span>
    </div>
</nav>

Parent and child page items

The breadcrumb should be inside a <ul> if there's more than one element. Only links related to current and previous page are allowed in the breadcrumb.

<nav class="usc-breadcrumb" aria-label="Breadcrumb">
    <div class="usc-breadcrumb__wrapper">
        <ul class="usc-breadcrumb__list">
            <li class="usc-breadcrumb__item">
                Plans
            </li>
            <li class="usc-breadcrumb__item">
                Unlimited Data With Payback
            </li>
        </ul>
    </div>
</nav>

NOTE: An aria-label has been added for accessibility purpose to help people know in which landmark they are located

Variants

Secondary theme with dark text on coloured background

To style a breadcrumb with dark text, add the data-dark attribute next to the .usc-breadcrumb class.

<nav class="usc-breadcrumb" aria-label="Breadcrumb" data-dark>
    <div class="usc-breadcrumb__wrapper">
        <span class="usc-breadcrumb__item">
            Home
        </span>
    </div>
</nav>

Style Customization

CSS Classes

CSS Class	Description
`usc-breadcrumb`	Mandatory. Wrapper of the component.
`usc-breadcrumb__wrapper`	Mandatory. Add padding and a max-width around the component.
`usc-breadcrumb__list`	Optional. Container of the list of item. Only if there's more than one item.
`usc-breadcrumb__item`	Mandatory. Class for each item of the breadcrumb. It can have more than one item on it.

CSS Attributes

CSS Attribute	Description
`data-dark`	Optional. Styles for darker text on each link.

Bullet

The Bullet component is a bullet list that contain a title next to it.

Demo

Include unlimited talk & text
$10 off with Auto Pay and Paperless Billing signup
Option to upgrade to Unlimited Plus for faster data speeds.

    
    
        
            
                
                    More reasons to love Unlimited Data with Payback.
                
            
            
                Include unlimited talk & text
                $10 off with Auto Pay and Paperless Billing signup
                Option to upgrade to Unlimited Plus for faster data speeds.
            
        
    

 
<div class="usc-bullet">
    <div class="usc-bullet__wrapper">
        <div class="usc-bullet__content">
            <div class="usc-grid__col usc-bullet__content-title usc-grid__col--12 usc-grid__col--sm-4">
                <h3 class="usc-typography__header usc-bullet__title">
                    More reasons to love Unlimited Data with Payback.
                </h3>
            </div>
            <ul class="usc-bullet__list usc-grid__col usc-grid__col--12 usc-grid__col--sm-8">
                <li>Include unlimited talk &amp; text</li>
                <li>$10 off with Auto Pay and Paperless Billing signup</li>
                <li>Option to upgrade to Unlimited Plus for faster data speeds.</li>
            </ul>
        </div>
    </div>
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-bullet`	Mandatory. Wrapper of the component.
`usc-bullet__wrapper`	Mandatory. Add padding around the component content.
`usc-bullet__content`	Mandatory. Wrapper of the component content.
`usc-bullet__title`	Mandatory. Title of the section.
`usc-bullet__list`	Mandatory. Bullet list section of the component.

Coverage

The main block where the user type is zip code to open the coverage map. Once the form is submitted, the user should see the coverage-map component.

Demo

Keeping you connected in the places that matter to you matters to us. Enter your address or zip code for a closer view:

    
    
    
    
        The plans you want, the coverage you need.
        Keeping you connected in the places that matter to you matters to us. Enter your address or zip code for a closer view:
        
            
                Enter a zipcode to see if there's coverage in this area
                
                    
                        
                        Enter zip code
                        
                            Invalid zip code. The format should be a five digits code (ex : 22222).
                        
                        
                            Please first insert a zip code.
                        
                    
                
                

                
                


                
            
        
    


 
<div class="usc-coverage">
    <div class="usc-coverage__background" style="background-image: url(./assets/images/Plans_Desktop_CoverageImage.png)"></div>
    <div class="usc-coverage__background usc-secondary-cta__background--mobile" style="background-image: url(./assets/images/Plans_Mobile_CoverageImage.png)"></div>
    <div class="usc-coverage__wrapper">
        <h2 class="usc-coverage__title usc-typography__header">The plans you want, the coverage you need.</h2>
        <p class="usc-coverage__body">Keeping you connected in the places that matter to you matters to us. Enter your address or zip code for a closer view:</p>
        <form usc-form="" name="zipCodeCoverage" data-ng-submit="uscFormCtrl.onSubmit()" class="usc-coverage__form ng-pristine ng-valid ng-scope" novalidate="">
            <fieldset>
                <legend class="visuallyhidden">Enter a zipcode to see if there's coverage in this area</legend>
                <div>
                    <div class="usc-text-input">
                        <input type="text" data-ng-model="zipCode" name="zipCode" id="zipCode" class="usc-text-input__input ng-pristine ng-untouched ng-valid" required="" aria-required="true" data-ng-pattern="/^[0-9]{5}(?:-[0-9]{4})?$/">
                        <label class="usc-text-input__label" for="zipCode">Enter zip code</label>
                        <p class="usc-text-input__error ng-hide" data-ng-show="zipCodeCoverage.$submitted &amp;&amp; zipCodeCoverage.zipCode.$error.pattern" tabindex="0">
                            Invalid zip code. The format should be a five digits code (ex : 22222).
                        </p>
                        <p class="usc-text-input__error ng-hide" data-ng-show="zipCodeCoverage.$submitted &amp;&amp; zipCodeCoverage.zipCode.$error.required" tabindex="0">
                            Please first insert a zip code.
                        </p>
                    </div>
                </div>
                <div>
                <!-- input submit template -->
                <button class="usc-button usc-form__submit" type="submit" id="coverage" value="value" data-primary=""><span class="usc-button__text">View Coverage Map
    </span></button>
                </div>
            </fieldset>
        </form>
    </div>
</div>

Note: The fieldset and the legend has been added for accessibility reason. The legend should describe what's the purpose of the form.

Style Customization

CSS Classes

CSS Class	Description
`usc-coverage`	Mandatory. Wrapper for component.
`usc-coverage__background`	Mandatory. Background image for the tablet and desktop version.
`usc-coverage__background--mobile`	Mandatory. Need to be add to the second `usc-coverage__background` to defined the mobile backgroud image.
`usc-coverage__wrapper`	Mandatory. Wrapper for component content.
`usc-coverage__title`	Mandatory. Title of the section.
`usc-coverage__body`	Optional. The body text of the section.

CTA List

The component that contain a list of CTA back to back with an title and an optional description.

Demo

Unlimited Data with Payback

The only plan that pays you for data you don't use.
Prepaid plans

All the data you need with no commitment.
View All Plans

Find what you're looking for in our full lineup of plans.

        
    
        
            Your perfect plan awaits.
        
        
            
        
    

    
 
<section class="usc-cta-list">
    <div class="usc-cta-list__wrapper">
        <div class="usc-cta-list__headline">
            <h2 class="usc-cta-list__headline__title usc-typography__header">Your perfect plan awaits.</h2>
        </div>
        <ul class="usc-cta-list__list">
            <!-- loop - include cta-list-single template -->
        </ul>
    </div>
</section>

You don't need to buy a brand-new phone to join our network.

Unlimited Data with Payback

The only plan that pays you for data you don't use.
Prepaid plans

All the data you need with no commitment.
View All Plans

Find what you're looking for in our full lineup of plans.

        
    
        
            Our network,
your terms.
            You don't need to buy a brand-new phone to join our network.
        
        
            
        
    

    
 
<section class="usc-cta-list">
    <div class="usc-cta-list__wrapper">
        <div class="usc-cta-list__headline">
            <h2 class="usc-cta-list__headline__title usc-typography__header">Our network,<br>your terms.</h2>
            <p class="usc-cta-list__headline__description">You don't need to buy a brand-new phone to join our network.</p>
        </div>
        <ul class="usc-cta-list__list">
            <!-- loop - include cta-list-single template -->
        </ul>
    </div>
</section>

        
    
        
            Other Plans
        
        
            
        
    

    
 
<section class="usc-cta-list" data-grid="">
    <div class="usc-cta-list__wrapper">
        <div class="usc-cta-list__headline">
            <h2 class="usc-cta-list__headline__title usc-typography__header">Other Plans</h2>
        </div>
        <ul class="usc-cta-list__list">
            <!-- loop - include cta-list-single template -->
        </ul>
    </div>
</section>

Basic Usage

HTML Structure

<section class="usc-cta-list">
    <div class="usc-cta-list__wrapper">
        <div class="usc-cta-list__headline">
            <h2 class="usc-cta-list__headline__title usc-typography__header">Your perfect plan awaits.</h2>
            <p class="usc-cta-list__headline__description">You don't need to buy a brand-new phone to join our network.</p>
        </div>
        <ul class="usc-cta-list__list">
            <!--loop item here-->
            <li class="usc-cta-list-single">
                <a class="usc-cta-list-single__cta" href="/unlimited-payback">
                    <h2 class="usc-cta-list-single__title">Unlimited Data with Payback</h2>
                    <p class="usc-cta-list-single__description">All the data you need with no commitment.</p>
                    <span class="usc-icon usc-icon--arrow-big-right usc-icon--white" aria-hidden="true">
                        <svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve" >
                            <g>
                                <polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1"></polygon>
                            </g>
                        </svg>
                    </span>
                </a>
            </li>
            <!--end loop here-->
        </ul>
    </div>
</section>

Style guide recommendations

When the component usc-cta-list contains data-grid attribute, there should be an even number of item in the usc-cta-list__list list.

Style Customization

CSS Classes

CSS Class	Description
`usc-cta-list`	Mandatory. Wrapper of the component.
`usc-cta-list__wrapper`	Mandatory. Wrapper of the content, add padding and a maximum width to the component.
`usc-cta-list__headline`	Mandatory. The Headline section that contain an title and a optional description.
`usc-cta-list__headline__title`	Mandatory. The title of the section.
`usc-cta-list__headline__description`	optional. The main description of the section.
`usc-cta-list__list`	Mandatory. The list of cta from the cta-list-single component.

CSS Attributes

CSS Attribute	Description
`data-grid`	Optional. Switch the CTA layout to a 2x2 grid.

FAQ

A component that display a list of question and once the user interact with it, it display the content. It's using the Collapse component.

Demo

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

View all related FAQs

        
    
        
            FAQ
        
        
            

            
                
            
            
                
            
            
                
            
            
                
            

        
        
        View all related FAQs    


    
 
<section class="usc-faq">
    <div class="usc-faq__wrapper">
        <header class="usc-faq__header">
            <h2 class="usc-typography__header"><abbr title="Frequently Asked Questions">FAQ</abbr></h2>
        </header>
        <ul class=" usc-faq__list">
            <!-- loop - include collapse template -->
            <li class="usc-faq__item">
                <!-- include collapse template -->
            </li>
            <li class="usc-faq__item">
                <!-- include collapse template -->
            </li>
            <li class="usc-faq__item">
                <!-- include collapse template -->
            </li>
            <li class="usc-faq__item">
                <!-- include collapse template -->
            </li>
        </ul>
        <!-- include arrowed-cta CTA template -->
        <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">View all related <abbr title="Frequently Asked Questions">FAQs</abbr></span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>    </div>
</section>

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I am a outline

U.S. Cellular will not activate devices that have been reported lost or stolen.

        
    
        
            Top FAQs
        
        
            

            
                
            
            
                
            
            
                
            

        
        
        I am a outline        U.S. Cellular will not activate devices that have been reported lost or stolen.
    


    
 
<section class="usc-faq" data-large="">
    <div class="usc-faq__wrapper">
        <header class="usc-faq__header">
            <h2 class="usc-typography__header">Top <abbr title="Frequently Asked Questions">FAQs</abbr></h2>
        </header>
        <ul class=" usc-faq__list">
            <!-- loop - include collapse template -->
            <li class="usc-faq__item">
                <!-- include collapse template -->
            </li>
            <li class="usc-faq__item">
                <!-- include collapse template -->
            </li>
            <li class="usc-faq__item">
                <!-- include collapse template -->
            </li>
        </ul>
        <!-- include button template -->
        <a href="#" class="usc-button" data-outline=""><span class="usc-button__text">I am a outline</span></a>        <p class="usc-faq__legal-text">U.S. Cellular will not activate devices that have been reported lost or stolen.</p>
    </div>
</section>

Style Customization

CSS Classes

CSS Class	Description
`usc-faq`	Mandatory. Wrapper of the component.
`usc-faq__wrapper`	Mandatory. The wrapper of the content of the component.
`usc-faq__header`	optional. The wrapper of the header section of the component.
`usc-faq__list`	Mandatory. The list of collapse item.
`usc-faq__item`	Mandatory. The wrapper of each item with a `collapse` component inside.
`usc-faq__legal-text`	optional. The legal text at the bottom of the component.

CSS Attributes

CSS Attribute	Description
`data-large`	Optional. Make list item looks like buttons.

This is the footer component. It contains a list of links.

Demo

    
    
        
            
                
                    
                        
                            
                                Phones
                            
                        
                        
                            
                                Plans
                            
                        
                        
                            
                                Deals
                            
                        
                        
                            
                                Store Locator
                            
                        
                        
                            
                                Support
                            
                        
                        
                            
                                FAQs
                            
                        
                        
                            
                                High-Speed Internet
                            
                        
                        
                            
                                Business Solutions
                            
                        
                        
                            
                                Home Solutions
                            
                        
                        
                            
                                Return Policy
                            
                        
                        
                            
                                Phone Accessories
                            
                        
                        
                            
                                Site Map
                            
                        
                    
                
            
            
                
                
                    
                        
                    
                    
                        
                            
                                
                                    
                                        Phones
                                    
                                
                                
                                    
                                        Plans
                                    
                                
                                
                                    
                                        Deals
                                    
                                
                                
                                    
                                        Store Locator
                                    
                                
                                
                                    
                                        Support
                                    
                                
                                
                                    
                                        FAQs
                                    
                                
                                
                                    
                                        High-Speed Internet
                                    
                                
                                
                                    
                                        Business Solutions
                                    
                                
                                
                                    
                                        Home Solutions
                                    
                                
                                
                                    
                                        Return Policy
                                    
                                
                                
                                    
                                        Phone Accessories
                                    
                                
                                
                                    
                                        Site Map
                                    
                                
                            
                        
                    
                    
                        
                            
                                Chat
                            
                            
                                Careers
                            
                            
                                Privacy
                            
                            
                                Legal
                            
                        
                        
                            ©2018 U.S. Cellular
                        
                    
                
            
        
    


 
<footer class="usc-footer">
    <div class="usc-footer__wrapper">
        <div class="usc-grid">
            <div class="usc-grid__col usc-grid__col--sm-7 usc-footer__desktop-link">
                <nav class="usc-footer__nav" aria-label="Footer navigation">
                    <ul class="usc-footer__list">
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Phones
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Plans
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Deals
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Store Locator
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Support
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                <abbr title="Frequently Asked Questions">FAQs</abbr>
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                High-Speed Internet
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Business Solutions
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Home Solutions
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Return Policy
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Phone Accessories
                            </a>
                        </li>
                        <li class="usc-footer__link-item">
                            <a class="usc-footer__link" href="/">
                                Site Map
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="usc-grid__col usc-grid__col--sm-5">
                <!-- include newsletter template -->
                <div class="usc-footer__flex-wrapper">
                    <div class="usc-footer__socials">
                        <!-- include social-link template -->
                    </div>
                    <div class="usc-grid__col usc-footer__mobile-link">
                        <nav class="usc-footer__nav" aria-label="Footer navigation">
                            <ul class="usc-footer__list">
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Phones
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Plans
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Deals
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Store Locator
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Support
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        <abbr title="Frequently Asked Questions">FAQs</abbr>
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        High-Speed Internet
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Business Solutions
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Home Solutions
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Return Policy
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Phone Accessories
                                    </a>
                                </li>
                                <li class="usc-footer__link-item">
                                    <a class="usc-footer__link" href="/">
                                        Site Map
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="usc-footer__additional-infos">
                        <ul class="usc-footer__small-links-list">
                            <li class="usc-footer__small-link-list-item">
                                <a class="usc-footer__small-link" href="#">Chat</a>
                            </li>
                            <li class="usc-footer__small-link-list-item">
                                <a class="usc-footer__small-link" href="#">Careers</a>
                            </li>
                            <li class="usc-footer__small-link-list-item">
                                <a class="usc-footer__small-link" href="#">Privacy</a>
                            </li>
                            <li class="usc-footer__small-link-list-item">
                                <a class="usc-footer__small-link" href="#">Legal</a>
                            </li>
                        </ul>
                        <span class="usc-footer__copyright">
                            ©2018 U.S. Cellular
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

NOTE: Because the footer social links are images links, an aria-label has been added for accessibility purpose. It help people know that they are leaving the actual site for an external link.

NOTE: An aria-required has been added for accessibility purpose because the field is required to submit the form.

Style Customization

CSS Classes

CSS Class	Description
`usc-footer`	Mandatory. Wrapper of the component.
`usc-footer__nav`	Mandatory. Container for the list of link.
`usc-footer__list`	Mandatory. List of link for the Footer.
`usc-footer__link-item`	Mandatory. Item of the Footer link.
`usc-footer__link`	Mandatory. The actual link inside the list.
`usc-footer__flex-wrapper`	Mandatory. Container for the right section of the footer.
`usc-footer__socials`	Mandatory. Container for the social links component.
`usc-footer__additional-infos`	Mandatory. Container for the small link list and the copyright.
`usc-footer__small-links-list`	Mandatory. List of small link in the footer.
`usc-footer__small-link-list-item`	Mandatory. List item containing the link.
`usc-footer__small-link`	Mandatory. The actual small link inside the list.
`usc-footer__copyright`	Mandatory. Copyright text in the footer.

Header content

The Header Content component is used as the first component on a page to set up or drive to content beneath it. It can have an image or solid color for background, and can display a title as a <h1>, body text and optional (but no more than 4) anchor links that drive to points further down the page. The text can be aligned on top or on bottom to provide readability against lifestyle image backgrounds or other spacing limitations.

Background color options are Hex #006BE6 blue background with white type or white background with black type.

Demo

The latest cell phones and accessories. At your fingertips.

        
    
    
    

    
    
        
            Home
        
    

    
    
        
            The latest cell phones and accessories. At your fingertips.
        
    

    
 
<header class="usc-header-content">
    <div class="usc-header-content__background" style="background-image: url(./assets/images/Shop_Desktop_HeaderImage_New.png)"></div>
    <div class="usc-header-content__background usc-header-content__background--mobile" style="background-image: url(./assets/images/Shop_Mobile_HeaderImage_New.png)"></div>
    <div class="usc-header-content__breadcrumb">
    <!-- include breadcrumb template -->
    <nav class="usc-breadcrumb" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <span class="usc-breadcrumb__item">Home</span>
        </div>
    </nav>
    </div>
    <div class="usc-header-content__hero">
        <div class="usc-header-content__hero__wrapper">
            <h1 class="usc-header-content__title usc-typography__header">The latest cell phones and accessories. At your fingertips.</h1>
        </div>
    </div>
</header>

Bring your own phone with you when you switch.

It's easy to transfer the phone or device you love over to our award-winning network.

        
    
    
    

    
    
        
            Home
        
    

    
    
        
            Bring your own phone with you when you switch.
            It's easy to transfer the phone or device you love over to our award-winning network. 
        
    

    
 
<header class="usc-header-content">
    <div class="usc-header-content__background" style="background-image: url(./assets/images/lifestyle_header.jpg)"></div>
    <div class="usc-header-content__background usc-header-content__background--mobile" style="background-image: url(./assets/images/lifestyle_header.jpg)"></div>
    <div class="usc-header-content__breadcrumb">
    <!-- include breadcrumb template -->
    <nav class="usc-breadcrumb" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <span class="usc-breadcrumb__item">Home</span>
        </div>
    </nav>
    </div>
    <div class="usc-header-content__hero">
        <div class="usc-header-content__hero__wrapper">
            <h1 class="usc-header-content__title usc-typography__header">Bring your own phone with you when you switch.</h1>
            <p class="usc-header-content__description">It's easy to transfer the phone or device you love over to our award-winning network. </p>
        </div>
    </div>
</header>

Prepaid Plans: No Limits or Commitments.

        
    
    
    

    
    
        
            Home
        
    

    
    
        
            Prepaid Plans: No Limits or Commitments.
        
    

    
 
<header class="usc-header-content" data-bottom="">
    <div class="usc-header-content__background" style="background-image: url(./assets/images/prepaid-plans.jpg)"></div>
    <div class="usc-header-content__background usc-header-content__background--mobile" style="background-image: url(./assets/images/prepaid-plans.jpg)"></div>
    <div class="usc-header-content__breadcrumb">
    <!-- include breadcrumb template -->
    <nav class="usc-breadcrumb" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <span class="usc-breadcrumb__item">Home</span>
        </div>
    </nav>
    </div>
    <div class="usc-header-content__hero">
        <div class="usc-header-content__hero__wrapper">
            <h1 class="usc-header-content__title usc-typography__header">Prepaid Plans: No Limits or Commitments.</h1>
        </div>
    </div>
</header>

Customer support for you, everywhere you go.

Our in-store and wireless customer support teams are here to help. What kind of information are you looking for?

Get more supplier information about:

        
    
    
    

    
    
        
            Support
        
    

    
    
        
            Customer support for you, everywhere you go.
            Our in-store and wireless customer support teams are here to help. What kind of information are you looking for? 
            Get more supplier information about:
            
                
                    
                
                
                    
                
                
                    
                
            
        
    

    
 
<header class="usc-header-content" data-cta="">
    <div class="usc-header-content__background" style="background-image: url(./assets/images/support.jpg)"></div>
    <div class="usc-header-content__background usc-header-content__background--mobile" style="background-image: url(./assets/images/support_m.jpg)"></div>
    <div class="usc-header-content__breadcrumb">
    <!-- include breadcrumb template -->
    <nav class="usc-breadcrumb" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <span class="usc-breadcrumb__item">Support</span>
        </div>
    </nav>
    </div>
    <div class="usc-header-content__hero">
        <div class="usc-header-content__hero__wrapper">
            <h1 class="usc-header-content__title usc-typography__header">Customer support for you, everywhere you go.</h1>
            <p class="usc-header-content__description">Our in-store and wireless customer support teams are here to help. What kind of information are you looking for? </p>
            <p class="usc-header-content__cta-legend">Get more supplier information about:</p>
            <ul class="usc-secondary-cta__list">
                <li>
                    <!-- include arrowed-cta template -->
                </li>
                <li>
                    <!-- include arrowed-cta template -->
                </li>
                <li>
                    <!-- include arrowed-cta template -->
                </li>
            </ul>
        </div>
    </div>
</header>

Supplier Information

U.S. Cellular is committed to building solid vendor relationships and creating opportunities for all vendors including minority- and woman-owned businesses.

Get more supplier information about:

        
    

    
    
        
            Supplier Information
        
    

    
    
        
            Supplier Information
            U.S. Cellular is committed to building solid vendor relationships and creating opportunities for all vendors including minority- and woman-owned businesses.
            Get more supplier information about:
            
                
                    
                
                
                    
                
                
                    
                
            
        
    

    
 
<header class="usc-header-content" data-dark="" data-cta="">
    <div class="usc-header-content__breadcrumb">
    <!-- include breadcrumb template -->
    <nav class="usc-breadcrumb" data-dark="" aria-label="Breadcrumb">
        <div class="usc-breadcrumb__wrapper">
            <span class="usc-breadcrumb__item">Supplier Information</span>
        </div>
    </nav>
    </div>
    <div class="usc-header-content__hero">
        <div class="usc-header-content__hero__wrapper">
            <h1 class="usc-header-content__title usc-typography__header">Supplier Information</h1>
            <p class="usc-header-content__description">U.S. Cellular is committed to building solid vendor relationships and creating opportunities for all vendors including minority- and woman-owned businesses.</p>
            <p class="usc-header-content__cta-legend">Get more supplier information about:</p>
            <ul class="usc-secondary-cta__list">
                <li>
                    <!-- include arrowed-cta template -->
                </li>
                <li>
                    <!-- include arrowed-cta template -->
                </li>
                <li>
                    <!-- include arrowed-cta template -->
                </li>
            </ul>
        </div>
    </div>
</header>

Note: A bottom attribute need to be add to the usc-header-content div. It will make the text align on the bottom of the component instead of the top.
The dark attribute can also be added to this variant, to be align on the bottom and have a black text.
Please note that the text cannot be too long, as its position is set as absolute while on tablet and desktop, the text will consequently be cut if the component is smaller than the text.

Style guide recommendations

Header content must visually be stacked right after the main navigation as its background visual will be reveal under usc-navigation__wrapper transparency. Header content cannot appear anywhere else on the page.
If present in the header content module, the .usc-secondary-cta__list can contain up to four anchor links.

Style Customization -->

CSS Classes

CSS Class	Description
`usc-header-content`	Mandatory. Wrapper of the header.
`usc-header-content__background`	Mandatory. Display the background image of the component. This class without the usc-header-content__background--mobile` next to it will only display the image to use on tablet and desktop.
`usc-header-content__background--mobile`	Mandatory. The background image to display on the mobile version. This class need to be added to the second `usc-header-content__background`.
`usc-header-content__breadcrumb`	Optional. Wrapper for the breadcrumb component.
`usc-header-content__hero`	Optional. Wrapper for the title and description section
`usc-header-content__hero__wrapper`	Optional. Add padding to the title and description.
`usc-header-content__title`	Mandatory. The title of the header, will be put inside a `<h1>`.
`usc-header-content__description`	Optional. The body text of the header.

CSS Attributes

CSS Attribute	Description
`data-dark`	Optional. Make the text goes black and add a white filter on the image.
`data-bottom`	Optional. Make the text align to the bottom of the component instead of the top.

Home Header

This component is to display a promotion into a header of the homepage. It can display the phone name or a image of the phone name as a h2, the phone picture and a optional call to action. It should also display the main h1 of the website.

Demo

U.S. Cellular - Deals and promotions

^$600 Off
Latest smartphones

Shop iPhone Xr

    
    
        
            
                U.S. Cellular - Deals and promotions
                
                    ^$600 Off
 Latest smartphones
                
                
                    
                    Shop iPhone Xr
                
            
            
                
            
        
    



 
<div class="usc-home-header">
    <div class="usc-home-header__content">
        <div class="usc-home-header__wrapper-content">
            <div class="usc-home-header__promo-section">
                <h1 class="visuallyhidden">U.S. Cellular - Deals and promotions</h1>
                <h2 class="usc-home-header__heading">
                    <span><sup>$</sup>600 Off</span><br> Latest smartphones
                </h2>
                <div class="usc-home-header__cta">
                    <!-- include button template -->
                    <a href="/" class="usc-button" data-outline=""><span class="usc-button__text">Shop iPhone&nbsp;X<span style="font-variant: small-caps;">r</span></span></a>
                </div>
            </div>
            <div class="usc-home-header__product-display">
                <img src="./assets/images/iphonexr.jpg" alt="iPhone XR visual">
            </div>
        </div>
    </div>
</div>

Note: The h1 is hidden visually, it's only visible for SEO reason and for screen-reader.

Style Customization

CSS Classes

CSS Class	Description
`usc-home-header`	Mandatory. The wrapper of the component.
`usc-home-header__content`	Mandatory. Define the white box where the element of the component are and the margin around it.
`usc-home-header__wrapper-content`	Mandatory. The wrapper that contain the content of the component and the padding around it.
`usc-home-header__promo-section`	Mandatory. The section on the left, where the promo is display with a CTA Button.
`usc-home-header__heading`	Mandatory. The heading of the component.
`usc-home-header__product-display`	optional. The image of a feature product.

Info list

The component with a list of information text. It include a title, a optional description and a list of a few Information Item component.

Demo

Unlimited Data with Payback

The only plan that pays you for data you don't use.
Prepaid plans

All the data you need with no commitment.
View All Plans

Find what you're looking for in our full lineup of plans.

        
    
        
            Your perfect plan awaits.
        
        
            
        
    

    
 
<section class="usc-info-list">
    <div class="usc-info-list__wrapper">
        <div class="usc-info-list__headline">
            <h2 class="usc-info-list__headline__title usc-typography__header">Your perfect plan awaits.</h2>
        </div>
        <ul class="usc-info-list__list">
            <!-- loop info-item template-->
        </ul>
    </div>
</section>

You don't need to buy a brand-new phone to join our network.

Unlimited Data with Payback

The only plan that pays you for data you don't use.
Prepaid plans

All the data you need with no commitment.
View All Plans

Find what you're looking for in our full lineup of plans.

        
    
        
            Our network,
your terms.
            You don't need to buy a brand-new phone to join our network.
        
        
            
        
    

    
 
<section class="usc-info-list">
    <div class="usc-info-list__wrapper">
        <div class="usc-info-list__headline">
            <h2 class="usc-info-list__headline__title usc-typography__header">Our network,<br>your terms.</h2>
            <p class="usc-info-list__headline__description">You don't need to buy a brand-new phone to join our network.</p>
        </div>
        <ul class="usc-info-list__list">
            <!-- loop info-item template-->
        </ul>
    </div>
</section>

Check the original packaging of the device, the IMEI is printed on the label
On many devices the IMEI can be retrieved by dialing *#06# on the keypad
Most devices have the IMEI in the Settings menu under General or About Device

        
    
        
            Here are three ways to find your IMEI number:
        
        
            
        
    

    
 
<section class="usc-info-list">
    <div class="usc-info-list__wrapper">
        <div class="usc-info-list__headline">
            <h2 class="usc-info-list__headline__title usc-typography__header">Here are three ways to find your <abbr title="International Mobile Equipment Identity">IMEI</abbr> number:</h2>
        </div>
        <ul class="usc-info-list__list">
            <!-- loop info-item template-->
        </ul>
    </div>
</section>

Note: The usc-info-item__description and usc-info-list__headline__description are all optional. The component is designed to work with or without any description under each section.

Style Customization

CSS Classes

CSS Class	Description
`usc-info-list`	Mandatory. Wrapper of the component.
`usc-info-list__wrapper`	Mandatory. Wrapper of the content, add padding and a maximum width to the component.
`usc-info-list__headline`	Mandatory. The Headline section that contain an title and a optional description.
`usc-info-list__headline__title`	Mandatory. The title of the section.
`usc-info-list__headline__description`	optional. The main description of the section.
`usc-info-list__list`	Mandatory. The list of text from the info-item component.

Line Selector Tool

This is the Step Payback component. With this component, you can select the number of lines for the plan and it will dynamically adjust the total price per lines. It is also displaying a title, a text-description, an image and a legal text with a link.

Demo

The only data plan that gives you $10/line back every month you’re under 3GB.

Select the number of lines you need.

Legend text

^$60 per
line

Unlimited Data with Payback. Autoplay/Paperless billing and credit approval required. Taxes and charges such as USF and RCRF apply. Unlimited Data Plan(s) will stream at speeds of up to 3.0 mbps and will automatically shift to 2G when each line reaches 22GB. Additional terms apply. Things we want you to know

    
    
        
            Unlimited data with payback
            The only data plan that gives you $10/line back every month you’re under 3GB.
            
                
                    
                        
                            Select the number of lines you need.
                        
                        
                            Legend text
                            
                            
                                
                                    
                                    1
                                
                                
                                    
                                    2
                                
                                
                                    
                                    3
                                
                                
                                    
                                    4
                                
                            
                        
                    
                    
                    
                        ^$60
                        per
line
                    
                    
                




            
            
                Unlimited Data with Payback. Autoplay/Paperless billing and credit approval required. Taxes and charges such as USF and RCRF apply. Unlimited Data Plan(s) will stream at speeds of up to 3.0 mbps and will automatically shift to 2G when each line reaches 22GB. Additional terms apply.
                
                    Things we want you to know
                    
                                    
            
        
    

 
<div class="usc-line-selector-tool ng-scope" data-usc-line-selector-tool="">
    <div class="usc-line-selector-tool__wrapper">
        <div class="usc-line-selector-tool__content">
            <h1 class="usc-typography__header usc-line-selector-tool__title">Unlimited data with payback</h1>
            <p class="usc-line-selector-tool__description">The only data plan that gives you $10/line back every month you’re under 3GB.</p>
            <form data-ng-submit="uscStepPaybackCtrl.onSubmit()" class="ng-pristine ng-valid">
                <div class="usc-line-selector-tool__line-selector__content">
                    <div class="usc-line-selector-tool__line-selector__wrapper">
                        <h2 class="usc-line-selector-tool__line-selector__title">
                            Select the number of lines you need.
                        </h2>
                        <fieldset>
                            <legend class="visuallyhidden">Legend text</legend>
                            <div class="usc-line-selector-tool__bg-line"></div>
                            <div class="usc-line-selector-tool__radio-wrapper">
                                <div class="usc-line-selector-tool__radio-input">
                                    <input type="radio" id="nbLines1" name="nbLinesSelection" value="1" data-price="70" data-ng-click="uscStepPaybackCtrl.nbLinesSelection($event)" aria-label="Select 1 line for 70 dollars per line">
                                    <label for="nbLines1"><span>1</span></label>
                                </div>
                                <div class="usc-line-selector-tool__radio-input">
                                    <input type="radio" id="nbLines2" name="nbLinesSelection" value="2" data-price="60" data-ng-click="uscStepPaybackCtrl.nbLinesSelection($event)" aria-label="Select 2 lines for 60 dollars per line" checked="">
                                    <label for="nbLines2"><span>2</span></label>
                                </div>
                                <div class="usc-line-selector-tool__radio-input">
                                    <input type="radio" id="nbLines3" name="nbLinesSelection" value="3" data-price="50" data-ng-click="uscStepPaybackCtrl.nbLinesSelection($event)" aria-label="Select 3 lines for 50 dollars per line">
                                    <label for="nbLines3"><span>3</span></label>
                                </div>
                                <div class="usc-line-selector-tool__radio-input">
                                    <input type="radio" id="nbLines4" name="nbLinesSelection" value="4" data-price="40" data-ng-click="uscStepPaybackCtrl.nbLinesSelection($event)" aria-label="Select 4 lines for 40 dollars per line">
                                    <label for="nbLines4"><span>4</span></label>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <section class="usc-line-selector-tool__price-per-line">
                    <span class="usc-line-selector-tool__dollars">
                        <sup class="usc-line-selector-tool__currency">$</sup><span data-ng-bind="pricePerLine" class="ng-binding">60</span>
                        <span class="usc-line-selector-tool__unit-text">per<br>line</span>
                    </span>
                    </section>
                </div>
<!-- includes input-submit template -->
<button class="usc-button usc-form__submit" type="submit" id="nbLinesSubmit" value="value" data-outline=""><span class="usc-button__text">Go to Next Step
    </span></button><!-- end input-submit template -->
            </form>
            <p class="usc-line-selector-tool__legal">
                Unlimited Data with Payback. Autoplay/Paperless billing and credit approval required. Taxes and charges such as <abbr title="Universal Service Fund">USF</abbr> and <abbr title="Regulatory Cost Recovery Fee">RCRF</abbr> apply. Unlimited Data Plan(s) will stream at speeds of up to 3.0 <abbr title="megabytes per second">mbps</abbr> and will automatically shift to <abbr title="Second generation network">2G</abbr> when each line reaches 22<abbr title="Gigabyte">GB</abbr>. Additional terms apply.
                <a href="#" class="usc-qualifier-tool__cta">
                    Things we want you to know
                    <!-- includes icon arrow-btn-right usc-icon--blue template -->
                    <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3     "></polygon></g></svg></span>                </a>
            </p>
        </div>
    </div>
</div>

NOTE: A default selection of lines number must be initially defined to have a price displayed on page load. To set a default selection, just add the class is-active to the usc-line-selector-tool__nb-line button.

NOTE: The price update is based on the data-price value of the selected button. (Ex: Selecting 3 lines for the plan will display will display $50 because the button have the data attribute data-price="50" ).

Style Customization

CSS Classes

CSS Class	Description
`usc-line-selector-tool`	Mandatory. Main component wrapper.
`usc-line-selector-tool__wrapper`	Mandatory. Wrapper of the content of the component.
`usc-line-selector-tool__content`	Mandatory. Contains all the component's content.
`usc-line-selector-tool__title`	Mandatory. Display the title of the component.
`usc-line-selector-tool__description`	Optional. Display a text description below the title.
`usc-line-selector-tool__img`	Optional. Display the component image.
`usc-line-selector-tool__line-selector__content`	Mandatory. Display The content of the line selection tool and price per lines.
`usc-line-selector-tool__line-selector__wrapper`	Mandatory. Wrapper of the line selection tool.
`usc-line-selector-tool__line-selector__title`	Mandatory. Display a title to bring some context or directions for using the line selection tool.
`usc-line-selector-tool__line-selector`	Mandatory. Display the buttons corresponding to count of selected lines.
`usc-line-selector-tool__nb-line`	Mandatory. Display a button correponding to a certain number of lines.
`usc-line-selector-tool__price-per-line`	Mandatory. The section containing the price per line depending on the selected number of lines.
`usc-line-selector-tool__dollars`	Mandatory. Display the actual price number.
`usc-line-selector-tool__currency`	Mandatory. Display the currency symbol.
`usc-line-selector-tool__unit-text`	Mandatory. Display a text corresponding to one line.
`usc-line-selector-tool__legal`	Optional. Display a legal text. I can contain a link.

Mobile Subnav CTA

2 Call-To-Action that display right under the main navigation.

It will be displayed only at mobile viewport.

Demo

Phones Plans

    
    

        
        Phones        

        
        Plans        

    

 
<div class="usc-mobile-subnav">
    <div class="usc-mobile-subnav__content">
        <!-- include button template -->
        <a href="#" class="usc-button" data-alpha=""><span class="usc-button__text">Phones</span></a>        <!-- end button template -->
        <!-- include button template -->
        <a href="#" class="usc-button" data-alpha=""><span class="usc-button__text">Plans</span></a>        <!-- end button template -->
    </div>
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-mobile-subnav`	Mandatory. Wrapper of the component.
`usc-mobile-subnav__content`	Mandatory. Wrapper for the content.

Plan Price

This is the Plan price component. It display a title, a list of text elements, a price, an add to cart CTA and a legal text with a link.

Demo

Phone upgrades every 12 months
Fast, unlimited, no-commitment Smartphone service
No credit check, no overages, no activation fee
No hidden fees

Get it all for

^$55 per
mo.

Add to cartan Unlimited Prepaid Plan for $55 per month.

All data on Unlimited Data plans stream at speeds of up to 3.0 Mbps and will automatically shift to 2G speeds when each line reaches 15GB. Learn More

    
    
        
            
                
                    Our Unlimited Prepaid Plan
                
                
                    Phone upgrades every 12 months
                    Fast, unlimited, no-commitment Smartphone service
                    No credit check, no overages, no activation fee
                    No hidden fees
                
            
            
                
                    Get it all for
                
                
                    ^$55
                    per
mo.
                
            
        
        
        Add to cartan Unlimited Prepaid Plan for $55 per month.
        
            All data on Unlimited Data plans stream at speeds of up to 3.0 Mbps and will automatically shift to 2G speeds when each line reaches 15GB.
            
                Learn More
                
                            
        
    

 
<section class="usc-plan-price" usc-step-payback="">
    <div class="usc-plan-price__wrapper">
        <div class="usc-plan-price__content">
            <div class="usc-plan-price__intro">
                <h2 class="usc-typography__header usc-plan-price__title">
                    Our Unlimited Prepaid Plan
                </h2>
                <ul class="usc-plan-price__list">
                    <li>Phone upgrades every 12 months</li>
                    <li>Fast, unlimited, no-commitment Smartphone service</li>
                    <li>No credit check, no overages, no activation fee</li>
                    <li>No hidden fees</li>
                </ul>
            </div>
            <div class="usc-plan-price__price">
                <div class="usc-plan-price__label">
                    <span>Get it all for</span>
                </div>
                <span class="usc-plan-price__dollars">
                    <sup class="usc-plan-price__currency">$</sup><span>55</span>
                    <span class="usc-plan-price__unit-text">per<br><abbr title="month">mo</abbr>.</span>
                </span>
            </div>
        </div>
        <!-- include button template -->
        <a href="#" class="usc-button" data-outline=""><span class="usc-button__text">Add to cart<span class="visuallyhidden">an Unlimited Prepaid Plan for $55 per month.</span></span></a>
        <p class="usc-plan-price__legal">
            All data on Unlimited Data plans stream at speeds of up to 3.0 <abbr title="megabytes per second">Mbps</abbr> and will automatically shift to <abbr title="Second generation network">2G</abbr> speeds when each line reaches 15<abbr title="Gigabyte">GB</abbr>.
            <a href="#" class="usc-qualifier-tool__cta" aria-label="Learn more about data on Unlimited Data plans">
                Learn More
                <!-- include icon arrow-btn-right usc-icon--blue template -->
                <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3     "></polygon></g></svg></span>            </a>
        </p>
    </div>
</section>

Style Customization

CSS Classes

CSS Class	Description
`usc-plan-price`	Mandatory. Wrapper of the component.
`usc-plan-price__wrapper`	Mandatory. Add padding, margin and max-width to the component.
`usc-plan-price__content`	Mandatory. Display the content of the component
`usc-plan-price__intro`	Mandatory. Wrapper for the title and the list of text items.
`usc-plan-price__title`	Mandatory. Title of the component
`usc-plan-price__list`	Optional. Display a list of text items.
`usc-plan-price__price`	Mandatory. Display all the content of the price section.
`usc-plan-price__label`	Mandatory. Display a text label on top of the price.
`usc-plan-price__dollars`	Mandatory. Display the price number.
`usc-plan-price__currency`	Mandatory. Display the price currency.
`usc-plan-price__unit-text`	Mandatory. Display a text corresponding of one unit.
`usc-plan-price__legal`	Optional. Display a legal text. It can contain a link.

Product Carousel

The product carousel. It display a few slide of the product-carousel-item component.
This component use the Slick.JS library to work.

Demo

Limited time

20% off

        


    
        
            Featured iPhones
            Find the Smartphone that fit your needs and your budget.
            
                
                Shop All Latest Deals
            
        
        
            
                
            
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                    Shop All Latest Deals
                
            
            
                
            
        
    

    
 
<section class="usc-product-carousel" data-carousel-slide="4">
<!-- add data-usc-product-carousel attribute to section.usc-product-carousel element to activate JS interactions -->
    <div class="usc-product-carousel__wrapper">
        <header class="usc-product-carousel__header">
            <h2 class="usc-product-carousel__header__title">Featured iPhones</h2>
            <p class="usc-product-carousel__header__description">Find the Smartphone that fit your needs and your budget.</p>
            <div class="usc-product-carousel__cta">
                <!-- include arrowed cta template -->
                <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Shop All Latest Deals</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>
            </div>
        </header>
        <div class="usc-product-carousel__main">
            <div class="usc-product-carousel__nav-wrapper">
                <button class="usc-product-carousel__nav usc-product-carousel__nav--prev" tabindex="{[{uscProductCarouselCtrl.isPrevBtnDisabled ? '-1' : '0' }]}" aria-label="Go to the previous slide">
                    <!-- include icon arrow-big-left template -->
                    <span class="usc-icon usc-icon--arrow-big-left usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="26.6,0 28.7,2.1 4.3,26.5 28.7,50.5 26.6,52.6 0,26.6    "></polygon></g></svg></span>
                </button>
            </div>
            <div class="usc-product-carousel__slider">
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <a class="usc-product-carousel__cta-slide" href="#">
                    <!-- include button mobileCTA template -->
                    <span class="usc-button" data-outline=""><span class="usc-button__text">Shop All Latest Deals</span></span>
                </a>
            </div>
            <div class="usc-product-carousel__nav-wrapper">
                <button class="usc-product-carousel__nav usc-product-carousel__nav--next" tabindex="{[{uscProductCarouselCtrl.isNextBtnDisabled ? '-1' : '0' }]}" aria-label="Go to the next slide">
                    <!-- include icon arrow-big-right template -->
                    <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span>
                </button>
            </div>
        </div>
    </div>
</section>

Limited time

20% off

        


    
        
            Featured iPhones
            Find the Smartphone that fit your needs and your budget.
            
                
                Shop All Latest Deals
            
        
        
            
                
            
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                    Shop All Latest Deals
                
            
            
                
            
        
    

    
 
<section class="usc-product-carousel" data-carousel-slide="4">
<!-- add data-usc-product-carousel attribute to section.usc-product-carousel element to activate JS interactions -->
    <div class="usc-product-carousel__wrapper">
        <header class="usc-product-carousel__header">
            <h2 class="usc-product-carousel__header__title">Featured iPhones</h2>
            <p class="usc-product-carousel__header__description">Find the Smartphone that fit your needs and your budget.</p>
            <div class="usc-product-carousel__cta">
                <!-- include arrowed cta template -->
                <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Shop All Latest Deals</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>
            </div>
        </header>
        <div class="usc-product-carousel__main">
            <div class="usc-product-carousel__nav-wrapper">
                <button class="usc-product-carousel__nav usc-product-carousel__nav--prev" tabindex="{[{uscProductCarouselCtrl.isPrevBtnDisabled ? '-1' : '0' }]}" aria-label="Go to the previous slide">
                    <!-- include icon arrow-big-left template -->
                    <span class="usc-icon usc-icon--arrow-big-left usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="26.6,0 28.7,2.1 4.3,26.5 28.7,50.5 26.6,52.6 0,26.6    "></polygon></g></svg></span>
                </button>
            </div>
            <div class="usc-product-carousel__slider">
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <div class="usc-product-carousel__slider__item">
                    <!-- include product-carousel-item template -->
                </div>
                <a class="usc-product-carousel__cta-slide" href="#">
                    <!-- include button mobileCTA template -->
                    <span class="usc-button" data-outline=""><span class="usc-button__text">Shop All Latest Deals</span></span>
                </a>
            </div>
            <div class="usc-product-carousel__nav-wrapper">
                <button class="usc-product-carousel__nav usc-product-carousel__nav--next" tabindex="{[{uscProductCarouselCtrl.isNextBtnDisabled ? '-1' : '0' }]}" aria-label="Go to the next slide">
                    <!-- include icon arrow-big-right template -->
                    <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span>
                </button>
            </div>
        </div>
    </div>
</section>

Note: A usc-product-carousel__slider__item should be added for each slide that contain a item / product. The only slide that don't need it is the last one, the usc-product-carousel__cta-slide.

Note: For demonstration purpose on the HTML markup, the attribute data-usc-product-carousel has been removed from section.sc-product-carousel element. Add data-usc-product-carousel attribute for linking javascript interaction.

Style Customization

CSS Classes

CSS Class	Description
`usc-product-carousel`	Mandatory. Wrapper for component.
`usc-product-carousel__wrapper`	Mandatory. Wrap the content of the component and add the padding on each side.
`usc-product-carousel__header`	Mandatory. Wrapper of the header side.
`usc-product-carousel__header__title`	Mandatory. Title of the section.
`usc-product-carousel__header__description`	Mandatory. Body text for this section.
`usc-product-carousel__cta`	Mandatory. Call to action to see more item related to the carousel. It doesn't appear on mobile since the call to action appear on the last slide of the carousel.
`usc-product-carousel__main`	Mandatory. Wrapper for the carousel section of this component.
`usc-product-carousel__nav-wrapper`	Mandatory. Wrapper for the arrow, for accessibility reason.
`usc-product-carousel__nav`	Mandatory. Arrow on both side of the carousel on the tablet and desktop version.
`usc-product-carousel__slider`	Mandatory. Wrapper for the slick carousel.
`usc-product-carousel__slider__item`	Mandatory. Single slide for the carousel.
`usc-product-carousel__cta-slide`	Mandatory. Last slide on the mobile view. Display a call to action.

HTML Attribute

HTML Attribute	Description
`data-carousel-slide`	Mandatory. Number of product to display into the carousel.

Product Cross Sell.

The component is a list of product-cross-sell-item component with an Optional title.

Demo

        
    
        Shop the latest tech to power your connected lifestyle.
        
            
                
            
            
                
            
            
                
            
            
                
            
        
    



    
 
<div class="usc-product-cross-sell">
    <div class="usc-product-cross-sell__content">
        <h2 class="usc-typography__header usc-product-cross-sell__title">Shop the latest tech to power your connected lifestyle.</h2>
        <ul class="usc-product-cross-sell__list">
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
        </ul>
    </div>
</div>

Shop the newest devices and accessories to power your connected lifestyle.

        
    
        Stay connected with the latest tech.
        Shop the newest devices and accessories to power your connected lifestyle.
        
            
                
            
            
                
            
            
                
            
            
                
            
        
    



    
 
<div class="usc-product-cross-sell" data-blue="">
    <div class="usc-product-cross-sell__content">
        <h2 class="usc-typography__header usc-product-cross-sell__title">Stay connected with the latest tech.</h2>
        <p class="usc-product-cross-sell__description">Shop the newest devices and accessories to power your connected lifestyle.</p>
        <ul class="usc-product-cross-sell__list">
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
            <li class="usc-product-cross-sell__list-item">
                <!-- include product-cross-sell-item template -->
            </li>
        </ul>
    </div>
</div>

Note: To create a blue variation of the cross-sell component, add the data-blue attribute on the usc-product-cross-sell div. The background will be blue and the text white.

Style Customization

CSS Classes

CSS Class	Description
`usc-product-cross-sell`	Mandatory. Wrapper of the component.
`usc-product-cross-sell__content`	Mandatory. The wrapper of the content and the padding of the component.
`usc-product-cross-sell__title`	Optional. The main title of the section.
`usc-product-cross-sell__description`	Optional. The description text of the section below the title.
`usc-product-cross-sell__list`	Mandatory. The wrapper of the list of cross-sell component.
`usc-product-cross-sell__list-item`	Mandatory. The list item wrapper of each instance of the cross-sell component.

HTML Attributes

HTML Attribute	Description
`data-blue`	Optional. Set text color in white, and background in blue.

Row Wrapper

Title and CTA text with arrow icon.

Demo

Phones & Devices FAQs

Usage & Services FAQ

            
    
        
        
    

        
 
<div class="usc-row-wrapper" data-light="">
    <div class="usc-row-wrapper__wrapper">
        <!-- include titled-list template (left) -->
        <!-- include titled-list template (right) -->
    </div>
</div>

Usage & Services FAQ

Phones & Devices FAQs

            
    
        
        
    

        
 
<div class="usc-row-wrapper">
    <div class="usc-row-wrapper__wrapper">
        <!-- include titled-list template (left) -->
        <!-- include titled-list template (right) -->
    </div>
</div>

Note: Add a light attribute next to the usc-row-wrapper class to display a white background instead of the default gray one.

CSS Classes

CSS Class	Description
`usc-row-wrapper__wrapper`	Mandatory. Wrapper of the component.
`usc-row-wrapper__wrapper`	Mandatory. Wrap the content and the has padding around for the base styling of the component.

Attribute	Description
`light`	optional. Add a white background-color instead of the gray one.

Secondary CTA

A module that contains an image or solid color as background, an optional title, optional description and one button (only one button should be used per module). Multiple Secondary CTA modules can be stacked as long as backgrounds alternate, i.e. two image backgrounds should not be stacked.

Demo

Enroll in Device Protection+
and U.S. Cellular will protect your device if it gets lost, stolen or damaged.

Learn About Device Protection+

        
    
    
    
        Enroll in Device Protection+
and U.S. Cellular will protect your device if it gets lost, stolen or damaged.
        
        Learn About Device Protection+    


    
 
<div class="usc-secondary-cta" data-white="" data-background="">
    <div class="usc-secondary-cta__background" style="background-image: url(./assets/images/Phones_Desktop_DP_New.jpg)"></div>
    <div class="usc-secondary-cta__background usc-secondary-cta__background--mobile" style="background-image: url(./assets/images/Phones_Mobile_DP_New.png)"></div>
    <div class="usc-secondary-cta__wrapper">
        <div class="usc-secondary-cta__description"><strong>Enroll in Device Protection+</strong><br>and U.S. Cellular will protect your device if it gets lost, stolen or damaged.</div>
        <!-- include button CTA template -->
        <a href="" class="usc-button" data-primary=""><span class="usc-button__text">Learn About Device Protection+</span></a>    </div>
</div>

Get the latest and greatest phones from Apple, Samsung and more.

Shop All Cell Phones

        
    
    
    
        Get the latest and greatest phones from Apple, Samsung and more.
        
        Shop All Cell Phones    


    
 
<div class="usc-secondary-cta" data-background="">
    <div class="usc-secondary-cta__background" style="background-image: url(./assets/images/lifestyle-cta_landscape.jpg)"></div>
    <div class="usc-secondary-cta__background usc-secondary-cta__background--mobile" style="background-image: url(./assets/images/lifestyle-cta_landscape_m.jpg)"></div>
    <div class="usc-secondary-cta__wrapper">
        <div class="usc-secondary-cta__description">Get the latest and greatest phones from Apple, Samsung and more.</div>
        <!-- include button CTA template -->
        <a href="" class="usc-button" data-primary=""><span class="usc-button__text">Shop All Cell Phones</span></a>    </div>
</div>

Learn More

        
    
    
    
        Why Switch to U.S. Cellular ?
        
        Learn More    


    
 
<div class="usc-secondary-cta" data-background="">
    <div class="usc-secondary-cta__background" style="background-image: url(./assets/images/lifestyle-cta_landscape.jpg)"></div>
    <div class="usc-secondary-cta__background usc-secondary-cta__background--mobile" style="background-image: url(./assets/images/lifestyle-cta_landscape_m.jpg)"></div>
    <div class="usc-secondary-cta__wrapper">
        <h2 class="usc-secondary-cta__title usc-typography__header">Why Switch to U.S. Cellular&nbsp;?</h2>
        <!-- include button CTA template -->
        <a href="" class="usc-button" data-primary=""><span class="usc-button__text">Learn More</span></a>    </div>
</div>

At U.S. Cellular we’ve built a network that goes where others don’t, because we know that’s what matters to you.

Check Your Coverage

        
    
        It’s time you joined the network you deserve.
        At U.S. Cellular we’ve built a network that goes where others don’t, because we know that’s what matters to you.
        
        Check Your Coverage    


    
 
<div class="usc-secondary-cta" data-white="">
    <div class="usc-secondary-cta__wrapper">
        <h2 class="usc-secondary-cta__title usc-typography__header">It’s time you joined the network you deserve.</h2>
        <p class="usc-secondary-cta__body">At U.S. Cellular we’ve built a network that goes where others don’t, because we know that’s what matters to you.</p>
        <!-- include button CTA template -->
        <a href="" class="usc-button" data-outline-white=""><span class="usc-button__text">Check Your Coverage</span></a>    </div>
</div>

At U.S. Cellular we’ve built a network that goes where others don’t, because we know that’s what matters to you.

Check Your Coverage

        
    
    
    
        It’s time you joined the network you deserve.
        At U.S. Cellular we’ve built a network that goes where others don’t, because we know that’s what matters to you.
        
        Check Your Coverage    


    
 
<div class="usc-secondary-cta" data-background="">
    <div class="usc-secondary-cta__background" style="background-image: url(./assets/images/lifestyle-cta_landscape.jpg)"></div>
    <div class="usc-secondary-cta__background usc-secondary-cta__background--mobile" style="background-image: url(./assets/images/lifestyle-cta_landscape_m.jpg)"></div>
    <div class="usc-secondary-cta__wrapper">
        <h2 class="usc-secondary-cta__title usc-typography__header">It’s time you joined the network you deserve.</h2>
        <p class="usc-secondary-cta__body">At U.S. Cellular we’ve built a network that goes where others don’t, because we know that’s what matters to you.</p>
        <!-- include button CTA template -->
        <a href="" class="usc-button" data-primary=""><span class="usc-button__text">Check Your Coverage</span></a>    </div>
</div>

Note: When displayed on a plain color background, this usc-button element must have outlineWhite attribute.

Style guide recommendations

This module should not contain more than one usc-button CTA button.
Background color options are Hex #006BE6 blue background with white type or white background with black type.
Center-aligned text should be the default but left-aligned can be used if necessary
Two secondary modules cannot be stacked together unless one contains a background image while the other is in plain color. (Or vice-versa).

CSS Classes

CSS Class	Description
`usc-secondary-cta`	Mandatory. Wrapper of the component.
`usc-secondary-cta__background`	Optional. The background image to appear on the CTA.
`usc-secondary-cta__background--mobile`	Optional. The background image to appear on the mobile version of the CTA.
`usc-secondary-cta__wrapper`	Mandatory. The wrapper of the content from the CTA.
`usc-secondary-cta__headline`	Optional. The title of the CTA as a `<h2>`.
`usc-secondary-cta__description`	Optional. The description of the CTA.
`usc-secondary-cta__body`	Optional. The smaller text possible for the CTA.
`usc-secondary-cta__cta-legend`	Optional. The legend for a list of CTA, look like a subtitle.
`usc-secondary-cta__list`	Optional. A list of `arrowed-cta`.

CSS Attributes

CSS Attribute	Description
`white`	Optional. Make the text from the title and the description appear white instead of black. Also put a blue background-color if no image has been used.
`background`	Optional. Attribute added when the component have a background-image. This attribute add the font family 'Stag Sans Book' to the description text when used in conjunction with the `white` attribute.

Secondary CTA left-aligned

A module that contains an image aligned on the right and text body to the left, an optional title, optional description and one optional button (only one button should be used per module). Multiple Secondary CTA left-aligned should not be stacked.

Demo

Get paid back for the data you don’t use.

Unlimited With Payback

Only U.S. Cellular® gives you back $10/line every month you're under 3GB.

Shop Unlimited with Payback

        
    
        
        
        
            Get paid back for the data you don’t use.
            Unlimited With Payback
            Only U.S. Cellular® gives you back $10/line every month you're under 3GB.
                
                Shop Unlimited with Payback
        
    


    
 
<div class="usc-secondary-cta-left-aligned">
    <div class="usc-secondary-cta-left-aligned__wrapper">
        <div class="usc-secondary-cta-left-aligned__background" style="background-image: url(./assets/images/Homepage_Desktop_GetPaidBack_New.jpg)"></div>
        <div class="usc-secondary-cta-left-aligned__background usc-secondary-cta-left-aligned__background--mobile" style="background-image: url(./assets/images/Homepage_Mobile_GetPaid_New.png)"></div>
        <div class="usc-secondary-cta-left-aligned__content">
            <h3 class="usc-secondary-cta-left-aligned__title">Get paid back for the data you don’t use.</h3>
            <h4 class="usc-secondary-cta-left-aligned__subtitle">Unlimited With Payback</h4>
            <p class="usc-secondary-cta-left-aligned__body">Only U.S. Cellular® gives you back $10/line every month you're under 3<abbr title="Gigabyte">GB</abbr>.</p>
                <!-- include button template -->
                <a href="#" class="usc-button" data-outline=""><span class="usc-button__text">Shop Unlimited with Payback</span></a>
        </div>
    </div>
</div>

The Only Plan That Pays You Back

Discover an unlimited plan that pays you back for the data you don’t use.

Save up to $240 a year with Unlimited with Payback

        
    
        
        
        
            The Only Plan That Pays You Back
            Discover an unlimited plan that pays you back for the data you don’t use.

                
                Save up to $240 a year with Unlimited with Payback        
    


    
 
<div class="usc-secondary-cta-left-aligned">
    <div class="usc-secondary-cta-left-aligned__wrapper">
        <div class="usc-secondary-cta-left-aligned__background" style="background-image: url(./assets/images/Homepage_Desktop_GetPaidBack_New.jpg)"></div>
        <div class="usc-secondary-cta-left-aligned__background usc-secondary-cta-left-aligned__background--mobile" style="background-image: url(./assets/images/Homepage_Mobile_GetPaid_New.png)"></div>
        <div class="usc-secondary-cta-left-aligned__content">
            <h3 class="usc-secondary-cta-left-aligned__title">The Only Plan That Pays You Back</h3>
            <p class="usc-secondary-cta-left-aligned__body">Discover an unlimited plan that pays you back for the data you don’t use.</p>
                <!-- include arrowed cta template -->
                <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Save up to $240 a year with Unlimited with Payback</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1  "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>        </div>
    </div>
</div>

Note: There is no attribute to add in order to display the arrowed cta variation. The styles are the save for the 2 variations. Only the content fields are changing. The content display should be based on field selected in the CMS.

Style Customization

CSS Classes

CSS Class	Description
`usc-secondary-cta-left-aligned`	Mandatory. Wrapper of the component.
`usc-secondary-cta-left-aligned__wrapper`	Mandatory. Add padding, margin and max-width to the component.
`usc-secondary-cta-left-aligned__background`	Optional. Add a background-image to the component.
`usc-secondary-cta-left-aligned__background--mobile`	Optional. Add a different background-image optimized for mobile resolutions.
`usc-secondary-cta-left-aligned__content`	Optional. Contains all the content elements.
`usc-secondary-cta-left-aligned__title`	Optional. Display the title of the component.
`usc-secondary-cta-left-aligned__subtitle`	Optional. Display a subtitle in the component.
`usc-secondary-cta-left-aligned__body`	Optional. Display a text description.
`usc-arrowed-cta__link`	Optional. Display an arrowed cta link.

Separator

Visual separator between website sections

Demo

    
    

 
<div class="usc-page-separator" aria-hidden="true">
    <div class="usc-page-separator__line"></div>
</div>

Basic Usage

HTML Structure

<div class="usc-page-separator" aria-hidden="true">
    <div class="usc-page-separator__line"></div>
</div>

Variant

White line

<div class="usc-page-separator" aria-hidden="true" data-light>
    <div class="usc-page-separator__line"></div>
</div>

Note: Add the data-light attribute to display a white line instead of a black one.

Style Customization

CSS Classes

CSS Class	Description
`usc-page-separator`	Mandatory. Wrapper of the component and add the padding around it.
`usc-page-separator__line`	Mandatory. Used to display the separator

HTML Attribute

HTML Attribute	Description
`data-light`	optional. Change the line color to white instead of normal black.

The social links are mainly use to share a web page or take a look at the official company's social media sites.

Demo

    
    
          
            
                            
          
          
            
                            
          
          
            
                            
          
    


 
<div class="usc-social-link">
    <ul class="usc-social-link__list">
          <li class="usc-social-link__item">
            <a href="https://www.facebook.com/USCellular/" class="usc-social-link__link" aria-label="Our facebook page, you'll be redirect outside the U.S. Cellular website" target="_blank">
                <span class="usc-icon usc-icon--facebook " aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 507.8 507.8" style="enable-background:new 0 0 507.8 507.8;" xml:space="preserve"><style type="text/css">
    .facebookSt0{display:none;}
    .facebookSt1{display:inline;}
    .facebookSt2{fill:#0169A7;}
</style><g class="facebookSt0"><g class="facebookSt1"><path d="M254.9,45.4c67.3,0,75.2,0.3,101.8,1.5c24.6,1.1,37.9,5.2,46.8,8.7c11.8,4.6,20.2,10,29,18.8s14.3,17.2,18.8,29
            c3.4,8.9,7.6,22.2,8.7,46.8c1.2,26.6,1.5,34.5,1.5,101.8s-0.3,75.2-1.5,101.8c-1.1,24.6-5.2,37.9-8.7,46.8
            c-4.6,11.8-10,20.2-18.8,29s-17.2,14.3-29,18.8c-8.9,3.4-22.2,7.6-46.8,8.7c-26.6,1.2-34.5,1.5-101.8,1.5s-75.2-0.3-101.8-1.5
            c-24.6-1.1-37.9-5.2-46.8-8.7c-11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8
            c-1.2-26.6-1.5-34.5-1.5-101.8s0.3-75.2,1.5-101.8c1.1-24.6,5.2-37.9,8.7-46.8c4.6-11.8,10-20.2,18.8-29s17.2-14.3,29-18.8
            c8.9-3.4,22.2-7.6,46.8-8.7C179.7,45.6,187.7,45.4,254.9,45.4 M254.9,0c-68.4,0-77,0.3-103.9,1.5C124.2,2.7,105.9,7,89.9,13.2
            c-16.6,6.4-30.6,15.1-44.6,29.1S22.7,70.4,16.2,86.9c-6.2,16-10.5,34.3-11.7,61.2C3.3,174.9,3,183.5,3,251.9s0.3,77,1.5,103.9
            c1.2,26.8,5.5,45.1,11.7,61.2c6.4,16.6,15.1,30.6,29.1,44.6s28.1,22.6,44.6,29.1c16,6.2,34.3,10.5,61.2,11.7s35.4,1.5,103.9,1.5
            s77-0.3,103.9-1.5c26.8-1.2,45.1-5.5,61.2-11.7c16.6-6.4,30.6-15.1,44.6-29.1s22.6-28.1,29.1-44.6c6.2-16,10.5-34.3,11.7-61.2
            c1.2-26.9,1.5-35.4,1.5-103.9s-0.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2c-6.4-16.6-15.1-30.6-29.1-44.6
            s-28.1-22.6-44.6-29.1c-16-6.2-34.3-10.5-61.2-11.7C331.9,0.3,323.3,0,254.9,0L254.9,0z"></path><path d="M254.9,122.6c-71.4,0-129.4,57.9-129.4,129.4s57.9,129.4,129.4,129.4S384.3,323.5,384.3,252S326.4,122.6,254.9,122.6z
             M254.9,335.9c-46.4,0-84-37.6-84-84s37.6-84,84-84s84,37.6,84,84S301.3,335.9,254.9,335.9z"></path><circle cx="389.4" cy="117.4" r="30.2"></circle></g></g><g><path class="facebookSt2" d="M479.8,0H28C12.5,0,0,12.5,0,28v451.8c0,15.5,12.5,28,28,28h243.2V311.2H205v-76.6h66.2V178
        c0-65.6,40.1-101.3,98.6-101.3c28,0,52.1,2.1,59.1,3v68.5h-40.6c-31.8,0-38,15.1-38,37.3v48.9h75.9l-9.9,76.6h-66v196.7h129.4
        c15.5,0,28-12.6,28-28V28C507.8,12.5,495.3,0,479.8,0z"></path></g></svg></span>            </a>
          </li>
          <li class="usc-social-link__item">
            <a href="https://twitter.com/uscellular" class="usc-social-link__link" aria-label="Our Twitter page, you'll be redirect outside the U.S. Cellular website." target="_blank">
                <span class="usc-icon usc-icon--twitter " aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="507.8px" height="507.8px" viewBox="0 0 507.8 507.8" style="enable-background:new 0 0 507.8 507.8;" xml:space="preserve"><style type="text/css">
    .twitterst0{display:none;}
    .twitterst1{display:inline;}
    .twitterst2{fill:#0065A4;}
</style><g class="twitterst0"><g class="twitterst1"><path d="M254.9,45.4c67.3,0,75.2,0.3,101.8,1.5c24.6,1.1,37.9,5.2,46.8,8.7c11.8,4.6,20.2,10,29,18.8s14.3,17.2,18.8,29
            c3.4,8.9,7.6,22.2,8.7,46.8c1.2,26.6,1.5,34.5,1.5,101.8s-0.3,75.2-1.5,101.8c-1.1,24.6-5.2,37.9-8.7,46.8
            c-4.6,11.8-10,20.2-18.8,29s-17.2,14.3-29,18.8c-8.9,3.4-22.2,7.6-46.8,8.7c-26.6,1.2-34.5,1.5-101.8,1.5s-75.2-0.3-101.8-1.5
            c-24.6-1.1-37.9-5.2-46.8-8.7c-11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8
            c-1.2-26.6-1.5-34.5-1.5-101.8s0.3-75.2,1.5-101.8c1.1-24.6,5.2-37.9,8.7-46.8c4.6-11.8,10-20.2,18.8-29s17.2-14.3,29-18.8
            c8.9-3.4,22.2-7.6,46.8-8.7C179.7,45.6,187.7,45.4,254.9,45.4 M254.9,0c-68.4,0-77,0.3-103.9,1.5C124.2,2.7,105.9,7,89.9,13.2
            c-16.6,6.4-30.6,15.1-44.6,29.1S22.7,70.4,16.2,86.9c-6.2,16-10.5,34.3-11.7,61.2C3.3,174.9,3,183.5,3,251.9s0.3,77,1.5,103.9
            c1.2,26.8,5.5,45.1,11.7,61.2c6.4,16.6,15.1,30.6,29.1,44.6s28.1,22.6,44.6,29.1c16,6.2,34.3,10.5,61.2,11.7s35.4,1.5,103.9,1.5
            s77-0.3,103.9-1.5c26.8-1.2,45.1-5.5,61.2-11.7c16.6-6.4,30.6-15.1,44.6-29.1s22.6-28.1,29.1-44.6c6.2-16,10.5-34.3,11.7-61.2
            c1.2-26.9,1.5-35.4,1.5-103.9s-0.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2c-6.4-16.6-15.1-30.6-29.1-44.6
            s-28.1-22.6-44.6-29.1c-16-6.2-34.3-10.5-61.2-11.7C331.9,0.3,323.3,0,254.9,0L254.9,0z"></path><path d="M254.9,122.6c-71.4,0-129.4,57.9-129.4,129.4s57.9,129.4,129.4,129.4S384.3,323.5,384.3,252S326.4,122.6,254.9,122.6z
             M254.9,335.9c-46.4,0-84-37.6-84-84s37.6-84,84-84s84,37.6,84,84S301.3,335.9,254.9,335.9z"></path><circle cx="389.4" cy="117.4" r="30.2"></circle></g></g><g class="twitterst0"><path class="st1" d="M479.8,0H28C12.5,0,0,12.5,0,28v451.8c0,15.5,12.5,28,28,28h243.2V311.2H205v-76.6h66.2V178
        c0-65.6,40.1-101.3,98.6-101.3c28,0,52.1,2.1,59.1,3v68.5h-40.6c-31.8,0-38,15.1-38,37.3v48.9h75.9l-9.9,76.6h-66v196.7h129.4
        c15.5,0,28-12.6,28-28V28C507.8,12.5,495.3,0,479.8,0z"></path></g><g><path class="twitterst2" d="M0,0v507.8h507.8V0H0z M380.1,189.2c0.2,2.8,0.2,5.6,0.2,8.4c0,86.1-65.5,185.3-185.3,185.3v-0.1
        c-35.4,0-70-10.1-99.8-29.2c5.1,0.6,10.3,0.9,15.5,0.9c29.3,0,57.8-9.8,80.9-27.9c-27.9-0.5-52.3-18.7-60.8-45.2
        c9.8,1.9,19.8,1.5,29.4-1.1c-30.4-6.1-52.2-32.8-52.2-63.8c0-0.3,0-0.6,0-0.8c9.1,5,19.2,7.8,29.6,8.2
        c-28.6-19.1-37.4-57.2-20.2-86.9c33.1,40.7,81.8,65.4,134.2,68c-5.2-22.6,1.9-46.3,18.8-62.2c26.2-24.7,67.5-23.4,92.1,2.8
        c14.6-2.9,28.6-8.2,41.4-15.8c-4.9,15.1-15,27.9-28.6,36c12.9-1.5,25.5-5,37.4-10.2C403.9,168.6,392.9,180,380.1,189.2z"></path></g></svg></span>            </a>
          </li>
          <li class="usc-social-link__item">
            <a href="https://www.youtube.com/user/USCellular" class="usc-social-link__link" aria-label="Our Youtube page, you'll be redirect outside the U.S. Cellular website" target="_blank">
                <span class="usc-icon usc-icon--youtube " aria-hidden="true"><!--?xml version="1.0" encoding="utf-8"?--><!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 507.8 507.8" style="enable-background:new 0 0 507.8 507.8;" xml:space="preserve"><style type="text/css">
    .youtubeSt0{display:none;}
    .youtubeSt1{display:inline;}
    .youtubeSt2{fill:#0169A7;}
</style><g class="youtubeSt0"><g class="youtubeSt1"><path d="M254.9,45.4c67.3,0,75.2,0.3,101.8,1.5c24.6,1.1,37.9,5.2,46.8,8.7c11.8,4.6,20.2,10,29,18.8s14.3,17.2,18.8,29
            c3.4,8.9,7.6,22.2,8.7,46.8c1.2,26.6,1.5,34.5,1.5,101.8s-0.3,75.2-1.5,101.8c-1.1,24.6-5.2,37.9-8.7,46.8
            c-4.6,11.8-10,20.2-18.8,29s-17.2,14.3-29,18.8c-8.9,3.4-22.2,7.6-46.8,8.7c-26.6,1.2-34.5,1.5-101.8,1.5s-75.2-0.3-101.8-1.5
            c-24.6-1.1-37.9-5.2-46.8-8.7c-11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8
            c-1.2-26.6-1.5-34.5-1.5-101.8s0.3-75.2,1.5-101.8c1.1-24.6,5.2-37.9,8.7-46.8c4.6-11.8,10-20.2,18.8-29s17.2-14.3,29-18.8
            c8.9-3.4,22.2-7.6,46.8-8.7C179.7,45.6,187.7,45.4,254.9,45.4 M254.9,0c-68.4,0-77,0.3-103.9,1.5C124.2,2.7,105.9,7,89.9,13.2
            c-16.6,6.4-30.6,15.1-44.6,29.1S22.7,70.4,16.2,86.9c-6.2,16-10.5,34.3-11.7,61.2C3.3,174.9,3,183.5,3,251.9s0.3,77,1.5,103.9
            c1.2,26.8,5.5,45.1,11.7,61.2c6.4,16.6,15.1,30.6,29.1,44.6s28.1,22.6,44.6,29.1c16,6.2,34.3,10.5,61.2,11.7s35.4,1.5,103.9,1.5
            s77-0.3,103.9-1.5c26.8-1.2,45.1-5.5,61.2-11.7c16.6-6.4,30.6-15.1,44.6-29.1s22.6-28.1,29.1-44.6c6.2-16,10.5-34.3,11.7-61.2
            c1.2-26.9,1.5-35.4,1.5-103.9s-0.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2c-6.4-16.6-15.1-30.6-29.1-44.6
            s-28.1-22.6-44.6-29.1c-16-6.2-34.3-10.5-61.2-11.7C331.9,0.3,323.3,0,254.9,0L254.9,0z"></path><path d="M254.9,122.6c-71.4,0-129.4,57.9-129.4,129.4s57.9,129.4,129.4,129.4S384.3,323.5,384.3,252S326.4,122.6,254.9,122.6z
             M254.9,335.9c-46.4,0-84-37.6-84-84s37.6-84,84-84s84,37.6,84,84S301.3,335.9,254.9,335.9z"></path><circle cx="389.4" cy="117.4" r="30.2"></circle></g></g><g class="youtubeSt0"><path class="youtubeSt1" d="M479.8,0H28C12.5,0,0,12.5,0,28v451.8c0,15.5,12.5,28,28,28h243.2V311.2H205v-76.6h66.2V178
        c0-65.6,40.1-101.3,98.6-101.3c28,0,52.1,2.1,59.1,3v68.5h-40.6c-31.8,0-38,15.1-38,37.3v48.9h75.9l-9.9,76.6h-66v196.7h129.4
        c15.5,0,28-12.6,28-28V28C507.8,12.5,495.3,0,479.8,0z"></path></g><g class="youtubeSt0"><path class="youtubeSt1" d="M0,0v507.8h507.8V0H0z M380.1,189.2c0.2,2.8,0.2,5.6,0.2,8.4c0,86.1-65.5,185.3-185.3,185.3v-0.1
        c-35.4,0-70-10.1-99.8-29.2c5.1,0.6,10.3,0.9,15.5,0.9c29.3,0,57.8-9.8,80.9-27.9c-27.9-0.5-52.3-18.7-60.8-45.2
        c9.8,1.9,19.8,1.5,29.4-1.1c-30.4-6.1-52.2-32.8-52.2-63.8c0-0.3,0-0.6,0-0.8c9.1,5,19.2,7.8,29.6,8.2
        c-28.6-19.1-37.4-57.2-20.2-86.9c33.1,40.7,81.8,65.4,134.2,68c-5.2-22.6,1.9-46.3,18.8-62.2c26.2-24.7,67.5-23.4,92.1,2.8
        c14.6-2.9,28.6-8.2,41.4-15.8c-4.9,15.1-15,27.9-28.6,36c12.9-1.5,25.5-5,37.4-10.2C403.9,168.6,392.9,180,380.1,189.2z"></path></g><g><path class="youtubeSt2" d="M0,507h507V0H0V507z M170.3,145.2l209.2,109.1L170.3,362.7V145.2z"></path></g></svg></span>            </a>
          </li>
    </ul>
</div>

Basic Usage

HTML Structure

<div class="usc-social-link">
 <p class="usc-social-link__title">Share this page</p>
  <ul class="usc-social-link__list">
    <li class="usc-social-link__item">
      <a href="https://www.facebook.com/USCellular/" class="usc-social-link__link" aria-label="Our facebook page, you'll be redirect outside the U.S. Cellular website.">
        <span class="usc-icon usc-icon--facebook" aria-hidden="true">
          <svg>...</svg>
        </span>
      </a>
    </li>
    ...
  </ul>
</div>

NOTE: An aria-label has been added for accessibility purpose to help people know that they are leaving the actual site for an external link.

Variants

Secondary theme with white text on coloured background

To style the social links with white text and bigger font-size, add the data-secondary to the .usc-social-link.

<div class="usc-social-link" data-secondary>
  ...
</div>

Inline theme with small rounded icons

To style the social links with the title and icons on the same line, add the data-inline to the .usc-social-link.

<div class="usc-social-link" data-inline>
  ...
</div>

Stacked theme with small rounded icons with title on top

To style the social links with the title and icons on different lines, add the data-stacked to the .usc-social-link.

<div class="usc-social-link" data-stacked>
  ...
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-social-link`	Mandatory. Main component wrapper
`usc-social-link__title`	Optional. Add description text.
`usc-social-link__list`	Mandatory.
`usc-social-link__item`	Mandatory. Add specific spacing between elements.
`usc-social-link__link`	Mandatory. Link styling.
`usc-icon`	Mandatory. Icon sizes.
`usc-icon--facebook`	Optional. Quick hint on which icon is displayed.

HTML Attributes

HTML Attribute	Description
`data-secondary`	Optional. Styles a secondary theme with dark background.
`data-inline`	Optional. Styles a inline theme with title before rounded icons.
`data-stacked`	Optional. Styles a stacked theme with title on top of rounded icons.

Title with Arrowed CTA

This component is a variation of the arrowed-cta with a title and a block around it.

Demo

Shop All Cell Phone Plans

            
    
        
            Ready to make the switch?
        
        
        Shop All Cell Phone Plans    

        
 
<div class="usc-title-with-arrowed-cta">
    <div class="usc-title-with-arrowed-cta__content">
        <h2 class="usc-typography__header usc-title-with-arrowed-cta__title">
            Ready to make the switch?
        </h2>
        <!-- include arrowed-cta template -->
        <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Shop All Cell Phone Plans</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>    </div>
</div>

Shop All Cell Phone Plans

            
    
        
            Ready to make the switch?
        
        
        Shop All Cell Phone Plans    

        
 
<div class="usc-title-with-arrowed-cta" data-blue="">
    <div class="usc-title-with-arrowed-cta__content">
        <h2 class="usc-typography__header usc-title-with-arrowed-cta__title">
            Ready to make the switch?
        </h2>
        <!-- include arrowed-cta template -->
        <a href="#" class="usc-arrowed-cta__link" data-white=""><span class="usc-arrowed-cta__link-text">Shop All Cell Phone Plans</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1     "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>    </div>
</div>

Note: Add the blue attribute to the div usc-title-with-arrowed-cta to make the background blue. We also need to add the attribute white to the div usc-title-with-arrowed-cta__link to make the link appear white.

Style Customization

CSS Classes

CSS Class	Description
`usc-title-with-arrowed-cta`	Mandatory. Wrapper of the component.
`usc-title-with-arrowed-cta__content`	Mandatory. Wrapper of the content of the component.
`usc-title-with-arrowed-cta__title`	Mandatory. Wrapper of the content of the component.
`usc-title-with-arrowed-cta__link`	Mandatory. Style the link and the text inside of it.
`usc-title-with-arrowed-cta__link-text`	Mandatory. Style the text inside the link.

HTML Attributes

HTML Attribute	Description
`data-blue`	Optional. Set text color in white, and background in blue.

Titled List

A list of CTA link with a title on the top of the section.

Demo

Phones & Devices FAQs

        
    
        Phones & Devices FAQs
        
                
                    
                    Android Phones                
                
                    
                    Apple iPhone                
                
                    
                    Device Protection+                
                
                    
                    Upgrade Program                
        
    

    
 
<section class="usc-titled-list">
    <div class="usc-titled-list__wrapper">
        <h2 class="usc-titled-list__title">Phones &amp; Devices <abbr title="Frequently Asked Questions">FAQs</abbr></h2>
        <ul class="usc-titled-list__list">
                <li class="usc-titled-list__item">
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Android Phones</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1  "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                </li>
                <li class="usc-titled-list__item">
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Apple iPhone</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1    "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                </li>
                <li class="usc-titled-list__item">
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Device Protection+</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1  "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                </li>
                <li class="usc-titled-list__item">
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Upgrade Program</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1     "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                </li>
        </ul>
    </div>
</section>

Note: The link use the arrowed-cta component here.

Style Customization

CSS Classes

CSS Class	Description
`usc-titled-list`	Mandatory. The wrapper of the component.
`usc-titled-list__wrapper`	Mandatory. Define the box where the element of the component are and the margin around it.
`usc-titled-list__title`	Mandatory. The title of the section list.
`usc-titled-list__list`	Mandatory. List of CTA with their arrow.

Device Support Compatibility

Demo

Phones & Devices Support

Search for information related to your device.

Select the type of support you want to use

Product-specific Support

Q&A

Enter device name

This field is required!

Or explore these resources:

            
    
        Phones & Devices Support
        
            
                Search for information related to your device.



    
        Select the type of support you want to use
        
            
    
    Product-specific Support

            
    
    Q&A

        
    



                
                    
                        
                            
                                Enter device name
                            
                            
                            
                                This field is required!
                            
                        






                    
                    
                    
                        
                                
                                    Device 1
                                
                                
                                    Device 2
                                
                                
                                    Device 3
                                
                                
                                    Device 4
                                
                                
                                    Device 5
                                
                                
                                    Device 6
                                
                        
                    
                
                Or explore these resources:
            
        
        
                
                    
                    Online tutorials                
                
                    
                    Free in-store workshops                
                
                    
                    Software updates                
        
    

        
 
<section class="usc-titled-list">
    <div class="usc-titled-list__wrapper">
        <h2 class="usc-titled-list__title">Phones &amp; Devices Support</h2>
        <form class="usc-device-support-compatibility ng-pristine ng-valid ng-scope" name="deviceSupportCompatibility" data-ng-submit="uscDeviceSupportCompatibilityCtrl.onSubmit()" novalidate="" data-usc-device-support-compatibility="">
            <fieldset>
                <legend class="usc-device-support-compatibility__description">Search for information related to your device.</legend>
<!-- include radio list template -->
<div class="usc-radio-list" data-usc-radio-list="">
    <fieldset>
        <legend class="visuallyhidden">Select the type of support you want to use</legend>
        <div class="usc-radio-list__wrapper">
            <div class="usc-radio-input">
    <input type="radio" id="ProductSpecificSupport" checked="" name="questionType">
    <label for="ProductSpecificSupport">Product-specific Support</label>
</div>
            <div class="usc-radio-input">
    <input type="radio" id="QA" name="questionType">
    <label for="QA"><abbr title="Questions and answers">Q&amp;A</abbr></label>
</div>
        </div>
    </fieldset>
</div>
<!-- end radio list template -->
                <div class="usc-device-support-compatibility__device-search">
                    <div class="usc-device-support-compatibility__input-group">
                        <div class="usc-dynamic-input ng-scope" data-usc-dynamic-input="">
                            <label class="usc-dynamic-input__label" for="testId">
                                Enter device name
                            </label>
                            <input data-ng-model="uscDeviceSupportCompatibilityCtrl.searchText" data-ng-focus="uscDynamicInputCtrl.onFocus(); uscDeviceSupportCompatibilityCtrl.onFocus($event)" data-ng-blur="uscDynamicInputCtrl.onBlur($event); uscDeviceSupportCompatibilityCtrl.onBlur($event)" data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyDown($event)" data-ng-required="true" class="usc-device-support-compatibility__device-list-inputs usc-dynamic-input__input ng-pristine ng-untouched ng-valid" type="text" name="name" id="testId" aria-owns="usc-device-support-compatibility-suggestions" aria-autocomplete="both" autocomplete="off">
                            <div class="usc-dynamic-input__errors">
                                <p class="usc-text-input__error ng-hide" data-ng-show="deviceSupportCompatibility.$submitted &amp;&amp; deviceSupportCompatibility.name.$error.required">This field is required!</p>
                            </div>
                        </div>
<!-- include input-submit -->
<button class="usc-button usc-form__submit" type="submit" id="qualifier-tool" value="value" data-alpha=""><span class="usc-button__text">Enter
<span class="visuallyhidden">your device name choice.</span></span></button>
<!-- end input-submit -->
                    </div>
                    <!-- ngIf: uscDeviceSupportCompatibilityCtrl.speakOutLoud -->
                    <div id="usc-device-support-compatibility-suggestions" class="usc-device-support-compatibility__suggestions" data-ng-class="{'is-open': uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen}" aria-hidden="{[{!uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen}]}">
                        <div class="usc-device-support-compatibility__list" role="listbox" tabindex="-1">
                                <div data-ng-click="uscDeviceSupportCompatibilityCtrl.getSelection($event)" data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyDown($event); uscDeviceSupportCompatibilityCtrl.suggestionKey($event)" data-ng-keyup="($event.keyCode === 13 || $event.keyCode === 32) &amp;&amp; uscDeviceSupportCompatibilityCtrl.getSelection($event)" tabindex="{[{uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen ? 0 : -1 }]}" role="option" id="suggestion-1" aria-selected="{[{uscDeviceSupportCompatibilityCtrl.selectedInput === 1 }]}" class="usc-device-support-compatibility__device">
                                    <span>Device 1</span>
                                </div>
                                <div data-ng-click="uscDeviceSupportCompatibilityCtrl.getSelection($event)" data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyDown($event); uscDeviceSupportCompatibilityCtrl.suggestionKey($event)" data-ng-keyup="($event.keyCode === 13 || $event.keyCode === 32) &amp;&amp; uscDeviceSupportCompatibilityCtrl.getSelection($event)" tabindex="{[{uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen ? 0 : -1 }]}" role="option" id="suggestion-2" aria-selected="{[{uscDeviceSupportCompatibilityCtrl.selectedInput === 2 }]}" class="usc-device-support-compatibility__device">
                                    <span>Device 2</span>
                                </div>
                                <div data-ng-click="uscDeviceSupportCompatibilityCtrl.getSelection($event)" data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyDown($event); uscDeviceSupportCompatibilityCtrl.suggestionKey($event)" data-ng-keyup="($event.keyCode === 13 || $event.keyCode === 32) &amp;&amp; uscDeviceSupportCompatibilityCtrl.getSelection($event)" tabindex="{[{uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen ? 0 : -1 }]}" role="option" id="suggestion-3" aria-selected="{[{uscDeviceSupportCompatibilityCtrl.selectedInput === 3 }]}" class="usc-device-support-compatibility__device">
                                    <span>Device 3</span>
                                </div>
                                <div data-ng-click="uscDeviceSupportCompatibilityCtrl.getSelection($event)" data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyDown($event); uscDeviceSupportCompatibilityCtrl.suggestionKey($event)" data-ng-keyup="($event.keyCode === 13 || $event.keyCode === 32) &amp;&amp; uscDeviceSupportCompatibilityCtrl.getSelection($event)" tabindex="{[{uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen ? 0 : -1 }]}" role="option" id="suggestion-4" aria-selected="{[{uscDeviceSupportCompatibilityCtrl.selectedInput === 4 }]}" class="usc-device-support-compatibility__device">
                                    <span>Device 4</span>
                                </div>
                                <div data-ng-click="uscDeviceSupportCompatibilityCtrl.getSelection($event)" data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyDown($event); uscDeviceSupportCompatibilityCtrl.suggestionKey($event)" data-ng-keyup="($event.keyCode === 13 || $event.keyCode === 32) &amp;&amp; uscDeviceSupportCompatibilityCtrl.getSelection($event)" tabindex="{[{uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen ? 0 : -1 }]}" role="option" id="suggestion-5" aria-selected="{[{uscDeviceSupportCompatibilityCtrl.selectedInput === 5 }]}" class="usc-device-support-compatibility__device">
                                    <span>Device 5</span>
                                </div>
                                <div data-ng-click="uscDeviceSupportCompatibilityCtrl.getSelection($event)" data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyDown($event); uscDeviceSupportCompatibilityCtrl.suggestionKey($event)" data-ng-keyup="($event.keyCode === 13 || $event.keyCode === 32) &amp;&amp; uscDeviceSupportCompatibilityCtrl.getSelection($event)" tabindex="{[{uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen ? 0 : -1 }]}" role="option" id="suggestion-6" aria-selected="{[{uscDeviceSupportCompatibilityCtrl.selectedInput === 6 }]}" class="usc-device-support-compatibility__device">
                                    <span>Device 6</span>
                                </div>
                        </div>
                    </div>
                </div>
                <p class="usc-device-support-compatibility__description">Or explore these resources:</p>
            </fieldset>
        </form>
        <ul class="usc-titled-list__list">
                <li class="usc-titled-list__item">
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Online tutorials</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1    "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                </li>
                <li class="usc-titled-list__item">
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Free in-store workshops</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1     "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                </li>
                <li class="usc-titled-list__item">
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Software updates</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1    "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                </li>
        </ul>
    </div>
</section>

Basic Usage

HTML Structure

<section class="usc-titled-list">
    <div class="usc-titled-list__wrapper">
        <h2 class="usc-titled-list__title">Phones & Devices Support</h2>
        <form 
            class="usc-device-support-compatibility" 
            name="deviceSupportCompatibility" 
            data-ng-submit="uscDeviceSupportCompatibilityCtrl.onSubmit()" 
            data-usc-device-support-compatibility
            novalidate 
        >
            <fieldset>
                <legend class="usc-device-support-compatibility__description">Search for information related to your device.</legend>
                <div class="usc-radio-list" data-usc-radio-list>
                    <fieldset>
                        <legend class="visuallyhidden">Select the type of support you want to use</legend>
                        <div class="usc-radio-list__wrapper">
                            <div class="usc-radio-input">
                                <input type="radio" id="ProductSpecificSupport" checked name="questionType">
                                <label for="ProductSpecificSupport">Product-specific Support</label>
                            </div>         
                            <div class="usc-radio-input">
                                <input type="radio" id="QA" name="questionType">
                                <label for="QA"><abbr title="Questions and answers">Q&A</abbr></label>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="usc-device-support-compatibility__device-search">
                    <div class="usc-device-support-compatibility__input-group">
                        <div class="usc-dynamic-input" usc-dynamic-input>
                            <label class="usc-dynamic-input__label" for="testId">
                                Enter device name
                            </label>
                            <input 
                                data-ng-model="uscDeviceSupportCompatibilityCtrl.searchText" 
                                data-ng-focus="uscDynamicInputCtrl.onFocus()" 
                                data-ng-blur="uscDynamicInputCtrl.onBlur($event); uscDeviceSupportCompatibilityCtrl.onBlur($event)" 
                                data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyup($event)" 
                                data-ng-required="true" 
                                class="usc-device-support-compatibility__device-list-inputs usc-dynamic-input__input" 
                                type="text" 
                                name="name" 
                                id="testId" 
                                aria-owns="usc-device-support-compatibility-suggestions"
                                aria-autocomplete="both"
                                autocomplete="off"
                            >
                            <div class="usc-dynamic-input__errors">
                                <p class="usc-text-input__error ng-hide" data-ng-show="deviceSupportCompatibility.$submitted && deviceSupportCompatibility.name.$error.required">This field is required!</p>
                            </div>
                        </div>
                        <button class="usc-button usc-form__submit" alpha type="submit" id="qualifier-tool" value="value">
                            <span class="usc-button__text">
                                Enter <span class="visuallyhidden">your device name choice.</span>
                            </span>
                        </button>
                    </div>
                    <div 
                        id="usc-device-support-compatibility-suggestions" 
                        class="usc-device-support-compatibility__suggestions" 
                        data-ng-class="{'is-open': uscDeviceSupportCompatibilityCtrl.searchSuggestionsIsOpen}" 
                        aria-hidden="true"
                    >
                        <ul class="usc-device-support-compatibility__list" role="listbox" tabindex="-1">
                            <!-- Loop each possibilities of suggestions here. They should have a id like this `suggestion-{{index}}` and start at 1-->
                            <li 
                                data-ng-click="uscDeviceSupportCompatibilityCtrl.getSelection($event)" 
                                data-ng-keydown="uscDeviceSupportCompatibilityCtrl.onKeyup($event); uscDeviceSupportCompatibilityCtrl.suggestionKey($event)" 
                                data-ng-keyup="($event.keyCode === 13 || $event.keyCode === 32) && uscDeviceSupportCompatibilityCtrl.getSelection($event)" 
                                tabindex="-1" 
                                id="suggestion-1" 
                                role="option" 
                                aria-selected="false" 
                                class="usc-device-support-compatibility__device"
                            >
                                <span>Device 1</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <p class="usc-device-support-compatibility__description">Or explore these resources:</p>
            </fieldset>
        </form>
        <ul class="usc-titled-list__list">
            <li class="usc-titled-list__item">
                <a class="usc-arrowed-cta__link" href="#">
                    <span class="usc-arrowed-cta__link-text">Online tutorials</span>
                    <!-- @include arrow-big-right icon -->
                    <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve">
                            <g>
                                <polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1"></polygon>
                            </g>
                        </svg>
                    </span>
                    <!-- @include arrow-btn-right icon -->
                    <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve">
                            <g class="st0">
                                <g class="st1"></g>
                            </g>
                            <g>
                                <polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3"></polygon>
                            </g>
                        </svg>
                    </span>
                </a>
            </li>
            <li class="usc-titled-list__item">
                <a class="usc-arrowed-cta__link" href="#">
                    <span class="usc-arrowed-cta__link-text">Free in-store workshops</span>
                    <!-- @include arrow-big-right icon -->
                    <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve">
                            <g>
                                <polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1"></polygon>
                            </g>
                        </svg>    
                    </span>
                    <!-- @include arrow-btn-right icon -->
                    <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve">
                            <g class="st0">
                                <g class="st1"></g>
                            </g>
                            <g>
                                <polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3"></polygon>
                            </g>
                        </svg>
                    </span>
                </a>
            </li>
            <li class="usc-titled-list__item">
                <a class="usc-arrowed-cta__link" href="#">
                    <span class="usc-arrowed-cta__link-text">Software updates</span>
                    <!-- @include arrow-big-right icon -->
                    <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true">    
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve">
                            <g>
                                <polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1"></polygon>
                            </g>
                        </svg>
                    </span>
                    <!-- @include arrow-btn-right icon -->
                    <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve">
                            <g class="st0">
                                <g class="st1"></g>
                            </g>
                            <g>
                                <polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3"></polygon>
                            </g>
                        </svg>
                    </span>
                </a>
            </li>
        </ul>
    </div>
</section>

Style Customization

CSS Classes

CSS Class	Description
`usc-device-support-compatibility`	Mandatory. The wrapper of the component.
`usc-device-support-compatibility__description`	Mandatory. Act as a subtitle and describe what will do form do.
`usc-device-support-compatibility__device-search`	Mandatory. The wrapper of the form.
`usc-device-support-compatibility__input-group`	Mandatory. The input where the user type is device.
`usc-device-support-compatibility__device-list-inputs`	Mandatory. The input tags.
`usc-device-support-compatibility__suggestions`	optional. A list of suggestion with the most popular phone names.
`usc-device-support-compatibility__list`	optional. The list of li with all the suggestions.
`usc-device-support-compatibility__device`	optional. All the phone name inside the list.
`usc-device-support-compatibility__description`	Mandatory. A heading that will explain the next section.

This is the newsletter component. It is contained in the footer component.

Demo

    

    
    
        Enter your dynamic-input address to subscribe to our newsletter
        
            


    Sign up for latest offers
    
    
    
        Not a valid email!
        This field is required!
    








                
    





 
<div class="usc-newsletter">
    <form name="newsletter" data-ng-submit="uscFormCtrl.onSubmit()" novalidate="" data-usc-form="" class="ng-pristine ng-valid ng-scope">
    <fieldset class="usc-newsletter__fieldset">
        <legend class="usc-newsletter__legend">Enter your dynamic-input address to subscribe to our newsletter</legend>
        <div class="usc-newsletter__input-group">
            
<!-- include dynamic-input template -->
<div class="usc-dynamic-input ng-scope" data-usc-dynamic-input="">
    <label data-ng-model="uscDynamicInputCtrl.inputLabel" class="usc-dynamic-input__label ng-pristine ng-untouched ng-valid" for="email">Sign up for latest offers
    </label>
    <input data-ng-model="uscDynamicInputCtrl.txtInput" data-ng-focus="uscDynamicInputCtrl.onFocus()" data-ng-blur="uscDynamicInputCtrl.onBlur($event)" data-ng-pattern="/[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}/" data-ng-required="true" aria-required="true" aria-describedby="dynamicInputError" required="" class="usc-dynamic-input__input ng-pristine ng-untouched ng-valid" type="email" name="email" id="email">
    <div class="usc-dynamic-input__errors" id="dynamicInputError">
        <p class="usc-text-input__error ng-hide" tabindex="-1" aria-hidden="false" data-ng-show="newsletter.$submitted &amp;&amp; newsletter.email.$error.pattern">Not a valid email!</p>
        <p class="usc-text-input__error ng-hide" tabindex="-1" aria-hidden="false" data-ng-show="newsletter.$submitted &amp;&amp; newsletter.email.$error.required">This field is required!</p>
    </div>
</div>
<!-- end dynamic-input template -->
<!-- include input-submit template -->
<button class="usc-button usc-form__submit" type="submit" id="newsletter" value="value"><span class="usc-button__text">Subscribe
    </span></button>
<!-- end input-submit template -->
                </div>
    </fieldset>
</form>
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-footer`	Mandatory. Wrapper of the component.
`usc-footer__list`	Mandatory. List of link for the Footer.
`usc-footer__link-item`	Mandatory. Item of the Footer link.
`usc-footer__link`	Mandatory. The actual link inside the list.

Qualifier tool

This component contains a field to submit a numeric value, and two different secondary states dependent on what’s entered.

Demo

U.S. Cellular will not activate devices that have been reported lost or stolen.

All you need to use your cellphone on our network is a U.S. Cellular SIM card. Add one to your cart now.

Limited time

Want to check another device?

U.S. Cellular will not activate devices that have been reported lost or stolen.

While you can't use this phone on our network, you can use it to get credit towards a new one. Get up to $300 for your old phone or tablet when you upgrade through our trade-in program.

Interested in upgrading?

Explore trade-in options

Want to check another device?

U.S. Cellular will not activate devices that have been reported lost or stolen.

    

    
        
            Get started now.
            
                
                    
                        Insert your IMEI number to check the compatibility of your device

                        
                        Enter 15-digit IMEI Number
    Not a valid IMEI Number!
This field is required!
                        

                        
                                                

                    
                
            
            U.S. Cellular will not activate devices that have been reported lost or stolen.
        

        
        
            Your device is good to go.
            
                All you need to use your cellphone on our network is a U.S. Cellular SIM card. Add one to your cart now.
            



    
        
        Limited time
        
            
            Apple iPhone XR
$XX/mo.
Reg $XX/mo.
Rated 4 out of 5 based on 45 users
            
        
        
            
        
        
            
            Shop Now
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.
        
    



            
                Want to check another device?

                
                

                
            
            U.S. Cellular will not activate devices that have been reported lost or stolen.
        

        
        
            This device isn't compatible.
            
                While you can't use this phone on our network, you can use it to get credit towards a new one. Get up to $300 for your old phone or tablet when you upgrade through our trade-in program.
            
            
                    
                    Interested in upgrading?
                    
                    Explore trade-in options                    
                
                
                    Want to check another device?
                    
                                        
                
            
            U.S. Cellular will not activate devices that have been reported lost or stolen.
        
    

 
<div class="usc-qualifier-tool ng-scope" data-usc-qualifier-tool="">
    <div class="usc-qualifier-tool__content">
        <div data-ng-show="!uscDeviceCompatibilityCtrl.hasGoodCompatibility &amp;&amp; !uscDeviceCompatibilityCtrl.hasBadCompatibility">
            <h3 class="usc-qualifier-tool__title usc-typography__header">Get started now.</h3>
            <form name="deviceCompatibility" data-ng-submit="uscFormCtrl.onSubmitCompatibility()" class="usc-qualifier-tool__form ng-pristine ng-valid ng-scope" novalidate="" usc-form="">
                <fieldset>
                    <div class="usc-qualifier-tool__form-items">
                        <legend class="visuallyhidden">Insert your IMEI number to check the compatibility of your device</legend>
                        <!-- include dynamic-input template -->
                        <div class="usc-dynamic-input ng-scope" data-usc-dynamic-input=""><label data-ng-model="uscDynamicInputCtrl.inputLabel" class="usc-dynamic-input__label ng-pristine ng-untouched ng-valid" for="IMEI">Enter 15-digit <abbr title="International Mobile Equipment Identity">IMEI</abbr> Number
    </label><input data-ng-model="uscDynamicInputCtrl.txtInput" data-ng-focus="uscDynamicInputCtrl.onFocus()" data-ng-blur="uscDynamicInputCtrl.onBlur($event)" data-ng-pattern="/^[0-9]{15}$/" data-ng-required="true" aria-required="true" aria-describedby="dynamicInputError" required="" maxlength="15" data-maxlength="15" minlength="15" data-minlength="15" class="usc-dynamic-input__input ng-pristine ng-untouched ng-valid" type="number" name="IMEI" id="IMEI" min="0" onkeydown="javascript: return (event.keyCode !== 69  &amp;&amp; event.keyCode !== 189);"><div class="usc-dynamic-input__errors" id="dynamicInputError"><p class="usc-text-input__error ng-hide" tabindex="-1" aria-hidden="false" data-ng-show="deviceCompatibility.$submitted &amp;&amp; deviceCompatibility.IMEI.$error.pattern">Not a valid <abbr title="International Mobile Equipment Identity">IMEI</abbr> Number!</p><p class="usc-text-input__error ng-hide" tabindex="-1" aria-hidden="false" data-ng-show="deviceCompatibility.$submitted &amp;&amp; deviceCompatibility.IMEI.$error.required">This field is required!</p></div></div>                        <!-- end dynamic-input template -->
                        <!-- include input submit template -->
                        <button class="usc-button usc-form__submit" type="submit" id="deviceCompatibility" value="value"><span class="usc-button__text">Enter
<span class="visuallyhidden"> the submission of your <abbr title="International Mobile Equipment Identity">IMEI</abbr></span></span></button>                        <!-- end input submit template -->
                    </div>
                </fieldset>
            </form>
            <p class="usc-qualifier-tool__legal-note">U.S. Cellular will not activate devices that have been reported lost or stolen.</p>
        </div>
        <!-- Device is good -->
        <div aria-live="assertive" class="usc-qualifier-tool__content-good-device ng-hide" data-ng-show="uscDeviceCompatibilityCtrl.hasGoodCompatibility &amp;&amp; !uscDeviceCompatibilityCtrl.hasBadCompatibility">
            <h3 class="usc-qualifier-tool__title usc-typography__header">Your device is good to go.</h3>
            <p class="usc-qualifier-tool__description">
                <span class="usc-qualifier-tool__description-text">All you need to use your cellphone on our network is a U.S. Cellular SIM card. Add one to your cart now.</span>
            </p>
<!-- include product carousel item template -->
<a class="usc-product-carousel-item" href="http://" tabindex="0" role="button">
    <div class="usc-product-carousel-item__content">
        <!-- include promotion-snipe template -->
        <div class="usc-promotion-snipe" data-corner=""><div class="usc-promotion-snipe__wrapper">Limited time</div></div>
        <header class="usc-product-carousel-item__header">
            <!-- include product-infos template -->
            <div class="usc-product-infos"><h3 class="usc-product-infos__name">Apple iPhone XR</h3><div class="usc-product-infos__current-price">$XX/mo.</div><div class="usc-product-infos__regular-price"><abbr title="Regular">Reg</abbr> $XX/mo.</div><!-- include product-rating template --><div class="usc-product-rating"><div class="usc-product-rating__list" aria-hidden="true"><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--yellow" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span><span class="usc-product-rating__star"><span class="usc-icon usc-icon--star usc-icon--outline" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.7 23.5" style="enable-background:new 0 0 24.7 23.5;" xml:space="preserve"><polygon points="12.4,0 15.7,8.4 24.7,9 17.8,14.8 20,23.5 12.4,18.7 4.7,23.5 6.9,14.8 0,9 9,8.4 "></polygon></svg></span></span></div><p class="usc-product-rating__number"><span class="visuallyhidden">Rated 4 out of 5 based on </span>45<span class="visuallyhidden"> users</span></p></div></div>
            <!-- end product-infos template -->
        </header>
        <figure class="usc-product-carousel-item__figure">
            <img class="usc-product-carousel-item__image" src="./assets/images/cell.jpg" alt="Apple iPhone XR">
        </figure>
        <footer class="usc-product-carousel-item__footer">
            <!-- include button CTA template -->
            <span class="usc-button" data-outline=""><span class="usc-button__text">Shop Now</span></span>
            <p class="usc-product-carousel-item__legal">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
        </footer>
    </div>
</a>
<!-- end product carousel item template -->
            <div class="usc-qualifier-tool__link-section">
                <p class="usc-qualifier-tool__subtitle">Want to check another device?</p>
                <!-- include arrowed cta template -->
                <button data-ng-click="uscDeviceCompatibilityCtrl.resetCompatibilityState()" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Try another IMEI</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></button>
                <!-- end arrowed cta template -->
            </div>
            <p class="usc-qualifier-tool__legal-note">U.S. Cellular will not activate devices that have been reported lost or stolen.</p>
        </div>
        <!-- Device is not good -->
        <div aria-live="assertive" class="ng-hide" data-ng-show="!uscDeviceCompatibilityCtrl.hasGoodCompatibility &amp;&amp; uscDeviceCompatibilityCtrl.hasBadCompatibility">
            <h3 class="usc-qualifier-tool__title usc-typography__header">This device isn't compatible.</h3>
            <p class="usc-qualifier-tool__description">
                <span class="usc-qualifier-tool__description-text">While you can't use this phone on our network, you can use it to get credit towards a new one. Get up to $300 for your old phone or tablet when you upgrade through our trade-in program.</span>
            </p>
            <div class="usc-grid usc-qualifier-tool__link-section">
                <div class="usc-grid__col usc-grid__col--md-6">    
                    <p class="usc-qualifier-tool__subtitle">Interested in upgrading?</p>
                    <!-- include arrowed-cta -->
                    <a href="#" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Explore trade-in options</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1    "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></a>                    <!-- end arrowed-cta -->
                </div>
                <div class="usc-grid__col usc-grid__col--md-6">
                    <p class="usc-qualifier-tool__subtitle">Want to check another device?</p>
                    <!-- include arrowed-cta - angularAction: "uscDeviceCompatibilityCtrl.resetCompatibilityState()"-->
                    <button data-ng-click="uscDeviceCompatibilityCtrl.resetCompatibilityState()" class="usc-arrowed-cta__link"><span class="usc-arrowed-cta__link-text">Try another IMEI</span><!-- include icon arrow-big-right usc-icon--blue template --><span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span><!-- include icon arrow-big-right usc-icon--blue template (x2) --><span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3  "></polygon></g></svg></span></button>                    <!-- end arrowed-cta -->
                </div>
            </div>
            <p class="usc-qualifier-tool__legal-note">U.S. Cellular will not activate devices that have been reported lost or stolen.</p>
        </div>
    </div>
</div>

Style Customization

CSS Classes

CSS Class	Description
`usc-qualifier-tool`	Mandatory. Wrapper of the component.
`usc-qualifier-tool__content`	Mandatory. Wrapper of the content, add padding and a maximum width to the component.
`usc-qualifier-tool__title`	Optional. The title of the component.
`usc-qualifier-tool__description`	Optional. The description of the component.
`usc-qualifier-tool__description-text`	Optional. Display the description as inline-block on mobile so that description text and CTA are on the same line.
`usc-qualifier-tool__cta`	Mandatory. Styles for CTA link.
`usc-qualifier-tool__form`	Mandatory. Layout for text and submit inputs.
`usc-qualifier-tool__form-items`	Mandatory. Flexbox wrapper for the form.
`usc-qualifier-tool__legal-note`	Optional. Styles for legal note paragraph.

Arrowed CTA

A simple Call to Action link with a text as label and an arrow on the right. It display as a blue text by default, but can be display as white if the white attribute is added on the link.

Demo

Learn about paying for your tech in flexible installments

                
            Learn about paying for your tech in flexible installments

                
                
                
                
        
            
    
 
        <a href="#" class="usc-arrowed-cta__link">
            <span class="usc-arrowed-cta__link-text">Learn about paying for your tech in flexible installments</span>
                <!-- include icon arrow-big-right usc-icon--blue template -->
                <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span>
                <!-- include icon arrow-big-right usc-icon--blue template (x2) -->
                <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3     "></polygon></g></svg></span>
        </a>

Learn about paying for your tech in flexible installments

                
            Learn about paying for your tech in flexible installments

                
                
                
                
        
            
    
 
        <a href="#" class="usc-arrowed-cta__link" data-white="">
            <span class="usc-arrowed-cta__link-text">Learn about paying for your tech in flexible installments</span>
                <!-- include icon arrow-big-right usc-icon--blue template -->
                <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span>
                <!-- include icon arrow-big-right usc-icon--blue template (x2) -->
                <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3     "></polygon></g></svg></span>
        </a>

Learn about paying for your tech in flexible installments

        
    
        
            Learn about paying for your tech in flexible installments

                
                
                
                
        
    

            
    
 
<div class="usc-arrowed-cta">
    <div class="usc-arrowed-cta__content">
        <a href="#" class="usc-arrowed-cta__link">
            <span class="usc-arrowed-cta__link-text">Learn about paying for your tech in flexible installments</span>
                <!-- include icon arrow-big-right usc-icon--blue template -->
                <span class="usc-icon usc-icon--arrow-big-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1   "></polygon></g></svg></span>
                <!-- include icon arrow-big-right usc-icon--blue template (x2) -->
                <span class="usc-icon usc-icon--arrow-btn-right usc-icon--blue" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3     "></polygon></g></svg></span>
        </a>
    </div>
</div>

To share anonymous comments or concerns with our Ethics Hotline, call 1‑800‑589‑3254

        
    
        
            
                To share anonymous comments or concerns with our Ethics Hotline, call 1‑800‑589‑3254



    


            
        
    


    
 
<div class="usc-arrowed-cta" data-action-bar="">
    <div class="usc-arrowed-cta__content">
        <a class="usc-arrowed-cta__link" href="tel:1-800-589-3254">
            <span class="usc-arrowed-cta__link-text">
                To share anonymous comments or concerns with our Ethics Hotline, call 1‑800‑589‑3254
<!-- include icon arrow-btn-right usc-icon--white template -->
<span class="usc-icon usc-icon--arrow-btn-right usc-icon--white" aria-hidden="true">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 26.7" style="enable-background:new 0 0 16 26.7;" xml:space="preserve"><g class="st0"><g class="st1"></g></g><g><polygon class="st2" points="2.7,0 0,2.7 10.7,13.3 0,24 2.7,26.7 16,13.3    "></polygon></g></svg>
</span>
            </span>
        </a>
    </div>
</div>

Basic Usage

HTML Structure

Note: The link have 2 icon, a small one usc-icon--arrow-btn-right and a bigger one usc-icon--arrow-big-right. The small one is used on the mobile version, the bigger is use on tablet and desktop.

Note: Add the data-white attribute to the usc-arrowed-cta__link class to display the link in white instead of blue.

Note: Add the data-action-bar attribute to the usc-arrowed-cta div. It add some padding around the component, put a blue background-color display the link as white text. It also have the same arrow in mobile that on desktop.

Style Customization

CSS Classes

CSS Class	Description
`usc-arrowed-cta`	Optional. Wrapper of the component. Needed only if we want to display the link as a block with padding and center horizontally.
`usc-arrowed-cta__content`	Optional. Wrapper of the content of the component, contain the padding and the maximum width.
`usc-arrowed-cta__link`	Mandatory. Style the link and the text inside of it.
`usc-arrowed-cta__link-text`	Mandatory. Style the text inside the link.

CSS Attributes

CSS Attribute	Description
`data-white`	Optional. Set text color and icon filling in white.
`data-action-bar`	Optional. Set the background-color of the bloc as blue and the text as white. It also have a different styling for the arrow on the link on mobile.

Collapse

The collapse component is simple bar that show and hide the component content on click.

Demo

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    
    
    
        Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    


 
<div class="usc-collapse ng-scope" data-usc-collapse="" data-ng-class="{'is-open': uscCollapseCtrl.isOpen}">
    <button class="usc-collapse__button" aria-expanded="{[{uscCollapseCtrl.isOpen}]}" aria-controls="section-lorem-ipsum" data-ng-click="uscCollapseCtrl.toggleCollapse()">
        <span class="usc-collapse__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod?</span>
        <!-- ngIf: !uscCollapseCtrl.isOpen -->
        <!-- <span class="usc-collapse__icon" aria-hidden="true" data-ng-if="!uscCollapseCtrl.isOpen">
            +
        </span> -->
        <!-- ngIf: uscCollapseCtrl.isOpen -->
        <!-- <span class="usc-collapse__icon" aria-hidden="true" data-ng-if="uscCollapseCtrl.isOpen">
            -
        </span> -->
    </button>
    <div id="section-lorem-ipsum" class="usc-collapse__content" aria-hidden="{[{!uscCollapseCtrl.isOpen}]}">
        <p class="usc-collapse__description">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    </div>
</div>

Basic usage

<div class="usc-collapse ng-scope" data-usc-collapse data-ng-class="{'is-open': uscCollapseCtrl.isOpen}">
    <button class="usc-collapse__button" aria-expanded="{[{uscCollapseCtrl.isOpen}]}" aria-controls="section-lorem-ipsum" data-ng-click="uscCollapseCtrl.toggleCollapse()">
        <span class="usc-collapse__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod?</span>
        <span class="usc-collapse__icon" aria-hidden="true" data-ng-if="!uscCollapseCtrl.isOpen">
            +
        </span>
        <span class="usc-collapse__icon" aria-hidden="true" data-ng-if="uscCollapseCtrl.isOpen">
            -
        </span>
    </button>
    <div id="section-lorem-ipsum" class="usc-collapse__content" aria-hidden="{[{!uscCollapseCtrl.isOpen}]}">
        <p class="usc-collapse__description">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    </div>
</div>

NOTE: An aria-expanded and a aria-controls has been added for accessibility purpose to help people know that the content is collapsable and that they can jump directly to the content. The aria-expend value should match the id value of the following usc-collapse__content div.

NOTE: An aria-hidden toggle has been added to the usc-collapse__content div. It should be to true when the content isn't visible and to false when it is.

Style Customization

CSS Classes

CSS Class	Description
`usc-collapse`	Mandatory. Wrapper of the component.
`usc-collapse__button`	Mandatory. The button that toggle the collapse animation.
`usc-collapse__icon`	Mandatory. The icon that indicate visually if the content is closed or opened.
`usc-collapse__content`	Mandatory. The wrapper of the content section.
`usc-collapse__description`	Mandatory. The description text of the section.

CTA List - Single

A single CTA from the CTA List, it contain a link, a title and a optional description.

Demo

Unlimited Data with Payback

The only plan that pays you for data you don't use.

        
    
        Unlimited Data with Payback
        The only plan that pays you for data you don't use.
        
        
    


    
 
<li class="usc-cta-list-single">
    <a class="usc-cta-list-single__cta" href="http://">
        <h2 class="usc-cta-list-single__title">Unlimited Data with Payback</h2>
        <p class="usc-cta-list-single__description">The only plan that pays you for data you don't use.</p>
        <!-- include icon arrow-big-right usc-icon--white template -->
        <span class="usc-icon usc-icon--arrow-big-right usc-icon--white" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1  "></polygon></g></svg></span>
    </a>
</li>

Prepaid plans

All the data you need with no commitment.

        
    
        Prepaid plans
        All the data you need with no commitment.
        
        
    


    
 
<li class="usc-cta-list-single">
    <a class="usc-cta-list-single__cta" href="http://">
        <h2 class="usc-cta-list-single__title">Prepaid plans</h2>
        <p class="usc-cta-list-single__description">All the data you need with no commitment.</p>
        <!-- include icon arrow-big-right usc-icon--white template -->
        <span class="usc-icon usc-icon--arrow-big-right usc-icon--white" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1  "></polygon></g></svg></span>
    </a>
</li>

View All Plans

Find what you're looking for in our full lineup of plans.

        
    
        View All Plans
        Find what you're looking for in our full lineup of plans.
        
        
    


    
 
<li class="usc-cta-list-single">
    <a class="usc-cta-list-single__cta" href="http://">
        <h2 class="usc-cta-list-single__title">View All Plans</h2>
        <p class="usc-cta-list-single__description">Find what you're looking for in our full lineup of plans.</p>
        <!-- include icon arrow-big-right usc-icon--white template -->
        <span class="usc-icon usc-icon--arrow-big-right usc-icon--white" aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve"><g><polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1  "></polygon></g></svg></span>
    </a>
</li>

Basic Usage

HTML Structure

<li class="usc-cta-list-single" tabindex="0">
    <a class="usc-cta-list-single__cta" href="#">
        <h2 class="usc-cta-list-single__title">Prepaid plans</h2>
        <p class="usc-cta-list-single__description">All the data you need with no commitment.</p>
        <span class="usc-icon usc-icon--arrow-big-right usc-icon--white" aria-hidden="true">
            <svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28.7 52.6" style="enable-background:new 0 0 28.7 52.6;" xml:space="preserve">
                <g>
                    <polygon points="2.1,52.6 0,50.5 24.4,26.1 0,2.1 2.1,0 28.7,26.1"></polygon>
                </g>
            </svg>
        </span>
    </a>
</li>

Style Customization

CSS Classes

CSS Class	Description
`usc-cta-list-single`	Mandatory. Wrapper of the component.
`usc-cta-list-single__cta`	Mandatory. The link of the component.
`usc-cta-list-single__title`	Mandatory. The title of the CTA.
`usc-cta-list-single__description`	optional. The description of the CTA.

How to Steps - Item

Step bullet point with a description and a number for how-to-steps-list.

Demo

Step 1

Lorem ipsum dolor sit amet.

        
    
        Step 1
    
    Lorem ipsum dolor sit amet.


    
 
<li class="usc-how-to-steps-item usc-grid__col usc-grid__col--12 usc-grid__col--sm-6 usc-grid__col--md-3">
    <div class="usc-how-to-steps-item__bullet">
        <span><span class="visuallyhidden">Step </span>1</span>
    </div>
    <div class="usc-how-to-steps-item__description">Lorem ipsum dolor sit amet.</div>
</li>

Style Customization

CSS Classes

CSS Class	Description
`usc-how-to-steps-item`	Mandatory. Wrapper of the component.
`usc-how-to-steps-item__bullet`	Mandatory. The circle with the number inside.
`usc-how-to-steps-item__description`	Mandatory. The text for the current step.

How to Steps - List

Ordered step list block of many how-to-steps-item component with a text as headline.

Demo

Step 1

Aenean mollis fermentum neque.
Step 2

Etiam posuere neque eu justo tincidunt.
Step 3

Vivamus elit elit, dignissim sed convallis.
Step 4

Praesent sit amet efficitur urna.

        
    
        
            Phasellus pretium rhoncus lacus.
            



    
        Step 1
    
    Aenean mollis fermentum neque.


    
        Step 2
    
    Etiam posuere neque eu justo tincidunt.


    
        Step 3
    
    Vivamus elit elit, dignissim sed convallis.


    
        Step 4
    
    Praesent sit amet efficitur urna.



            
        
    

    
 
<section class="usc-how-to-steps-list">
    <div class="usc-how-to-steps-list__wrapper">
        <div class="usc-how-to-steps-list__content">
            <h2 class="usc-how-to-steps-list__title usc-typography__header">Phasellus pretium rhoncus lacus.</h2>
            <ol class="usc-how-to-steps-list__list usc-grid">
<!-- loop step-item template -->
<li class="usc-how-to-steps-item usc-grid__col usc-grid__col--12 usc-grid__col--sm-6 usc-grid__col--md-3">
    <div class="usc-how-to-steps-item__bullet">
        <span><span class="visuallyhidden">Step </span>1</span>
    </div>
    <div class="usc-how-to-steps-item__description">Aenean mollis fermentum neque.</div>
</li>
<li class="usc-how-to-steps-item usc-grid__col usc-grid__col--12 usc-grid__col--sm-6 usc-grid__col--md-3">
    <div class="usc-how-to-steps-item__bullet">
        <span><span class="visuallyhidden">Step </span>2</span>
    </div>
    <div class="usc-how-to-steps-item__description">Etiam posuere neque eu justo tincidunt.</div>
</li>
<li class="usc-how-to-steps-item usc-grid__col usc-grid__col--12 usc-grid__col--sm-6 usc-grid__col--md-3">
    <div class="usc-how-to-steps-item__bullet">
        <span><span class="visuallyhidden">Step </span>3</span>
    </div>
    <div class="usc-how-to-steps-item__description">Vivamus elit elit, dignissim sed convallis.</div>
</li>
<li class="usc-how-to-steps-item usc-grid__col usc-grid__col--12 usc-grid__col--sm-6 usc-grid__col--md-3">
    <div class="usc-how-to-steps-item__bullet">
        <span><span class="visuallyhidden">Step </span>4</span>
    </div>
    <div class="usc-how-to-steps-item__description">Praesent sit amet efficitur urna.</div>
</li>
<!-- end loop -->
            </ol>
        </div>
    </div>
</section>

Style Customization

CSS Classes

CSS Class	Description
`usc-how-to-steps-list`	Mandatory. Wrapper of the component.
`usc-how-to-steps-list__wrapper`	Mandatory. Define the width and the padding of the component.
`usc-how-to-steps-list__content`	Mandatory. Append the content of the component and add the border on the tablet/ desktop version.
`usc-how-to-steps-list__title`	Mandatory. The headline of the component.
`usc-how-to-steps-list__list`	Mandatory. The list of `step-item` component.

Info Item

The component that show basic information inside a list. It's used mainly inside the Info List component.

Demo

Unlimited Data with Payback

The only plan that pays you for data you don't use.

        
    Unlimited Data with Payback
    The only plan that pays you for data you don't use.

    
 
<li class="usc-info-item">
    <h3 class="usc-info-item__title">Unlimited Data with Payback</h3>
    <p class="usc-info-item__description">The only plan that pays you for data you don't use.</p>
</li>

Prepaid plans

All the data you need with no commitment.

        
    Prepaid plans
    All the data you need with no commitment.

    
 
<li class="usc-info-item">
    <h3 class="usc-info-item__title">Prepaid plans</h3>
    <p class="usc-info-item__description">All the data you need with no commitment.</p>
</li>

View All Plans

Find what you're looking for in our full lineup of plans.

        
    View All Plans
    Find what you're looking for in our full lineup of plans.

    
 
<li class="usc-info-item">
    <h3 class="usc-info-item__title">View All Plans</h3>
    <p class="usc-info-item__description">Find what you're looking for in our full lineup of plans.</p>
</li>

Style Customization

CSS Classes

CSS Class	Description
`usc-info-item`	Mandatory. Wrapper of the component.
`usc-info-item__title`	Mandatory. The title of the section.
`usc-info-item__description`	optional. The main description of the section.

Product Cross Sell - Item.

The product cross sell item component display a link from a image and a text.

Demo

Connected Home

    
    
        
    
    
        Connected Home 
        
    



 
<a href="#" class="usc-product-cross-sell-item">
    <div class="usc-product-cross-sell-item__image" aria-hidden="true">
        <img src="./assets/images/cross-sell_connected-home.png" alt="">
    </div>
    <span class="usc-product-cross-sell-item__category-label">
        Connected Home&nbsp;<span class="usc-product-cross-sell-item__category-label-arrow">
        </span>
    </span>
</a>

Note: The image will not be "visible" by screen-reader since it should describe the label next to it, but the alt should stay here for SEO reason.

Style Customization

CSS Classes

CSS Class	Description
`usc-product-cross-sell-item`	Mandatory. Wrapper of the component and link of the item.
`usc-info-item__title`	Mandatory. The title of the section.
`usc-info-item__description`	optional. The main description of the section.

Searchbar

The searchbar component visually stands aside the main navigation bar. It aims to reveal a text input field when the search button is clicked. It also shows a list of popular search tags, and a list of suggestions when the user is typing (autocomplete).

Demo

    
    
    
        
            
            
        
    
    
    
                    
                
                    iPhone
                
            
                    
                
                    iPhone XS
                
            
                    
                
                    iPhone XS Max
                
            
                    
                
                    iPhone XR
                
            
                    
                
                    iPhone X
                
            
                    
                
                    iPhone 8
                
            
                    
                
                    iPhone 8 Plus
                
            
                    
                
                    iPhone 7
                
            
            
    
        
    
    
        
            
                Popular Search
            
                            
                    
                        Battery Life
                    
                
                            
                    
                        Apple iPhone X
                    
                
                            
                    
                        Apps
                    
                
                            
                    
                        Samsung Devices
                    
                
                            
                    
                        File Claim
                    
                
                    
    
    
    


 
<div class="usc-searchbar ng-scope" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}" data-usc-searchbar="">
    <button class="usc-searchbar__icon-button is-active" data-ng-class="{
                'is-active': !uscSearchbarCtrl.isActive,
                'transition-disabled': !uscSearchbarCtrl.hasAnimation
            }" data-ng-click="uscSearchbarCtrl.onSearchClick()" data-ng-focus="uscSearchbarCtrl.closeSubnav()" aria-label="Search">
        <span class="usc-icon usc-icon--search " aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138.9749 141.09627"><defs><style>.a{fill:#0065a4;}</style></defs><title>Magnifing Glass</title><path class="a" d="M135.6206,121.47847,89.995,75.85288A49.01687,49.01687,0,1,0,73.2135,91.59837L119.3571,137.742a11.5,11.5,0,1,0,16.2635-16.26351ZM21.4228,76.57718a39,39,0,1,1,55.1543,0A39.00005,39.00005,0,0,1,21.4228,76.57718Z"></path></svg>
</span>    </button>
    <div class="usc-searchbar__input-wrapper" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}">
        <div class="usc-searchbar__input-wrapper-container">
            <input class="usc-searchbar__input" data-ng-focus="uscSearchbarCtrl.onSearchClick();" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}" data-ng-keypress="$event.keyCode === 13 &amp;&amp; uscSearchbarCtrl.onSearchClick()" data-ng-keydown="$event.keyCode === 27 &amp;&amp; uscSearchbarCtrl.onCancelClick(); uscSearchbarCtrl.onKeyDown($event)" data-ng-keyup="$event.keyCode !== 13 &amp;&amp; uscSearchbarCtrl.showSearchSuggestions($event)" placeholder="Type something to search" aria-owns="searchbar-result" aria-autocomplete="both" aria-activedescendant="" type="text" aria-label="Type something to search" aria-describedby="initInstr">
            <button class="usc-searchbar__cancel-button" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}" data-ng-click="uscSearchbarCtrl.onCancelClick()" aria-label="Cancel the current search">
                Cancel
            </button>
        </div>
    </div>
    <div class="usc-searchbar__search-list" role="dialog" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}" data-ng-keydown="$event.keyCode === 27 &amp;&amp; uscSearchbarCtrl.onCancelClick()">
    <ul id="searchbar-result" aria-expanded="{[{uscSearchbarCtrl.hasSearchResults}]}" role="listbox" tabindex="0" class="usc-searchbar__search-list-grid" data-ng-class="{'is-active': uscSearchbarCtrl.hasSearchResults}" data-ng-blur="uscNavigationSubnavCtrl.closeSubnav()" data-ng-focus="uscNavigationSubnavCtrl.openSubnav()">
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-1" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones">
                    iPhone
                </a>
            </li>
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-2" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones-xs">
                    iPhone XS
                </a>
            </li>
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-3" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones-xs-max">
                    iPhone XS Max
                </a>
            </li>
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-4" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones-xr">
                    iPhone XR
                </a>
            </li>
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-5" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones-x">
                    iPhone X
                </a>
            </li>
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-6" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones-8">
                    iPhone 8
                </a>
            </li>
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-7" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones-8-plus">
                    iPhone 8 Plus
                </a>
            </li>
                    <li class="usc-searchbar__search-datas" role="option" aria-selected="false">
                <a id="searchbar-suggestion-8" data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);" tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}" class="usc-searchbar__search-links" href="/iphones-7">
                    iPhone 7
                </a>
            </li>
            </ul>
    <div id="initInstr" aria-live="assertive" class="visuallyhidden ng-binding" tabindex="-1">
        {[{uscSearchbarCtrl.speakOutLoud ? "There is 8 result available" : ""}]}
    </div>
    <div class="usc-searchbar__searchbar-popular">
        <ul class="usc-searchbar__searchbar-popular-wrapper">
            <li class="usc-searchbar__searchbar-popular-title">
                Popular Search
            </li>
                            <li class="usc-searchbar__searchbar-popular-result">
                    <a href="#" class="usc-button" data-tag="" data-ng-blur="uscSearchbarCtrl.popularTagFocusOut($event)">
                        <span class="usc-button__text">Battery Life</span>
                    </a>
                </li>
                            <li class="usc-searchbar__searchbar-popular-result">
                    <a href="#" class="usc-button" data-tag="" data-ng-blur="uscSearchbarCtrl.popularTagFocusOut($event)">
                        <span class="usc-button__text">Apple iPhone X</span>
                    </a>
                </li>
                            <li class="usc-searchbar__searchbar-popular-result">
                    <a href="#" class="usc-button" data-tag="" data-ng-blur="uscSearchbarCtrl.popularTagFocusOut($event)">
                        <span class="usc-button__text">Apps</span>
                    </a>
                </li>
                            <li class="usc-searchbar__searchbar-popular-result">
                    <a href="#" class="usc-button" data-tag="" data-ng-blur="uscSearchbarCtrl.popularTagFocusOut($event)">
                        <span class="usc-button__text">Samsung Devices</span>
                    </a>
                </li>
                            <li class="usc-searchbar__searchbar-popular-result">
                    <a href="#" class="usc-button" data-tag="" data-ng-blur="uscSearchbarCtrl.popularTagFocusOut($event)">
                        <span class="usc-button__text">File Claim</span>
                    </a>
                </li>
                    </ul>
    </div>
    <div class="usc-searchbar__overlay" data-ng-click="uscSearchbarCtrl.onCancelClick()" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}">
    </div>
</div>
</div>

Basic Usage

HTML Structure

<div class="usc-searchbar" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}" data-usc-searchbar>
    <button
            class="usc-searchbar__icon-button"
            data-ng-class="{
                'is-active': !uscSearchbarCtrl.isActive,
                'transition-disabled': !uscSearchbarCtrl.hasAnimation
            }"
            data-ng-click="uscSearchbarCtrl.onSearchClick()"
            data-ng-focus="uscSearchbarCtrl.closeSubnav()"
            aria-label="Search"
    >
        <!--include icon search-->
    </button>
    <div class="usc-searchbar__input-wrapper" data-ng-class="{'is-active': uscSearchbarCtrl.isActive}">
        <div class="usc-searchbar__input-wrapper-container">
            <input
                class="usc-searchbar__input"
                data-ng-focus="uscSearchbarCtrl.onSearchClick();"
                data-ng-class="{'is-active': uscSearchbarCtrl.isActive}"
                data-ng-keypress="$event.keyCode === 13 && uscSearchbarCtrl.onSearchClick()"
                data-ng-keydown="$event.keyCode === 27 && uscSearchbarCtrl.onCancelClick(); uscSearchbarCtrl.onKeyDown($event)"
                data-ng-keyup="$event.keyCode !== 13 && uscSearchbarCtrl.showSearchSuggestions($event)"
                placeholder="Type something to search"
                aria-owns="searchbar-result"
                type="text"
                aria-label="Type something to search"
            />
            <button
                class="usc-searchbar__cancel-button"
                data-ng-class="{'is-active': uscSearchbarCtrl.isActive}"
                data-ng-click="uscSearchbarCtrl.onCancelClick()"
                aria-label="Cancel the current search"
            >
                Cancel
            </button>
        </div>
    </div>
    <div
        class="usc-searchbar__search-list"
        role="dialog"
        data-ng-class="{'is-active': uscSearchbarCtrl.isActive}"
        data-ng-keydown="$event.keyCode === 27 && uscSearchbarCtrl.onCancelClick()"
    >
        <ul
            id="searchbar-result"
            aria-expanded="{[{uscSearchbarCtrl.hasSearchResults}]}"
            role="listbox"
            class="usc-searchbar__search-list-grid"
            data-ng-class="{'is-active': uscSearchbarCtrl.hasSearchResults}"
            data-ng-blur="uscNavigationSubnavCtrl.closeSubnav()"
            data-ng-focus="uscNavigationSubnavCtrl.openSubnav()"
        >
            <!--loop through suggestion items-->
                <li class="usc-searchbar__search-datas" role="option">
                    <a
                        id="searchbar-suggestion-{{loop.index}}"
                        data-ng-keydown="uscSearchbarCtrl.onKeyDown($event);"
                        tabindex="{[{uscSearchbarCtrl.hasSearchResults ? 0 : -1 }]}"
                        class="usc-searchbar__search-links"
                        href="{{item.attributes.href}}"
                    >
                        {{item.label}}
                    </a>
                </li>
            <!--end loop suggestion items-->
        </ul>
        <div aria-live="assertive" class="visuallyhidden" tabindex="-1">
            {[{uscSearchbarCtrl.speakOutLoud ? "There is {{data.result | length }} result avaible" : ""}]}
        </div>
        <div class="usc-searchbar__searchbar-popular">
            <ul class="usc-searchbar__searchbar-popular-wrapper">
                <li class="usc-searchbar__searchbar-popular-title">
                    Popular Search
                </li>
                <!--loop through popular items-->
                    <li class="usc-searchbar__searchbar-popular-result">
                        <a href="#" class="usc-button" data-tag="">
                            <span class="usc-button__text">
                                Apple iPhone X
                            </span>
                        </a>
                    </li>
                <!--end loop popular items-->
            </ul>
        </div>
        <div
            class="usc-searchbar__overlay"
            data-ng-click="uscSearchbarCtrl.onCancelClick()"
            data-ng-class="{'is-active': uscSearchbarCtrl.isActive}"
        >
        </div>
    </div>
</div>

Accessibility

An aria-label has been added for accessibility purpose to help people know that they currently navigate into the search component. The tabindex attribute must be present on each item of popular search as well as the suggestion list, so that the user may focus on it in the correct order.

Style Customization

CSS Classes

CSS Class	Description
`usc-searchbar`	Mandatory. Wrapper of the component.
`usc-searchbar__icon-button`	Mandatory. Container of the search button.
`usc-searchbar__input-wrapper`	Mandatory. Container of the input field.
`usc-searchbar__input-wrapper-container`	Mandatory. Wrapper of the input field.
`usc-searchbar__input`	Mandatory. Styles for the search input.
`usc-searchbar__cancel-button`	Mandatory. Styles for the cancel button.
`usc-searchbar__search-list`	Mandatory. Container of the results list.
`usc-searchbar__search-list-grid`	Mandatory. Sets layout for results list.
`usc-searchbar__search-datas`	Mandatory. Styles for results item.
`usc-searchbar__search-links`	Mandatory. Styles results link tag.
`usc-searchbar__searchbar-popular`	Mandatory. Container for popular search.
`usc-searchbar__searchbar-popular-wrapper`	Mandatory. Wrapper for popular search.
`usc-searchbar__searchbar-popular-title`	Mandatory. Styles for popular search title.
`usc-searchbar__searchbar-popular-result`	Mandatory. Styles for popular search item.
`usc-button[data-tag]`	Mandatory. Styles for popular search link tag.