Logo
  • 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

    • Component Hub
    • Home
    • Shop
    • Phone
    • Bring Your Own Phone
    • Plans
    • Support
    • Unlimited Payback
    • Why Switch
    • Prepaid Plans
    • Content Detail

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

MyAccount_USCIcon account Artboard 1 arrow-btn-left arrow-btn-right arrow-big-left arrow-big-right Shopping Cart. You have items. cart coverage close facebook location setting setting star store store-finder Magnifing Glass search twitter Artboard 1 play youtube
    
    MyAccount_USCIcon


 
<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

Header

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

Apple iPhone XR
Shop Now

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

        
    

Apple iPhone XR

$XX/mo.
Reg $XX/mo.

Rated 4 out of 5 based on 45 users

Apple iPhone XR
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>
​

Apple iPhone XR

$XX/mo.
Reg $XX/mo.

Rated 4 out of 5 based on 45 users

Apple iPhone XR
Shop Now

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

        
    
Limited time

Apple iPhone XR

$XX/mo.
Reg $XX/mo.

Rated 4 out of 5 based on 45 users

Apple iPhone XR
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>
​

Get iPhone XR and save half.

Apple iPhone XR
Shop Now

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

        
    
20% off

Get iPhone XR and save half.

Apple iPhone XR
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

Phone

iPhone XR

iPhone XR visual
Shop iPhone Xr
        
Phone

iPhone XR

iPhone XR visual
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>
​
​
Phone

iPhone XR iPhone XR

iPhone XR visual
Shop iPhone Xr
        
Phone

iPhone XR iPhone XR

iPhone XR visual
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.

Breadcrumb

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
            
  • 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
            
  • 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

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.
    

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

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

Invalid zip code. The format should be a five digits code (ex : 22222).

Please first insert a zip code.

    

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

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

Your perfect plan awaits.

  • 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>

Our network,
your terms.

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

  • 2GB Plans

    Don't need Unlimited Data? This plan’s for you.

  • Small Business Plans

    Get set up online for fewer than 15 lines.

  • High-Speed Internet Plans

    For reliable connection in the Middle of Anywhere.

  • Global Solutions

    Explore our International Long Distance and Roaming plans.

        

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

FAQ

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

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

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>
​

Top FAQs

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

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

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

Footer

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
Enter your dynamic-input address to subscribe to our newsletter

Not a valid email!

This field is required!

  • 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
    
  • 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

Home

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

        
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>
Home

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>
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:

  • Phones & Devices
  • Current Customers
  • Usage & Services
        
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

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:

  • Our Invoice Processing
  • Our Commitment to Diversity
  • Our Approach to Ethics
        
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
iPhone XR visual
    

U.S. Cellular - Deals and promotions

$600 Off
Latest smartphones

Shop iPhone Xr
iPhone XR visual
 
<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

Your perfect plan awaits.

  • 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>

Our network,
your terms.

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>

Here are three ways to find your IMEI number:

  • 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

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

Navigation

The navigation component is the sticky header. It contains all the main sections links and also sub navigation links to navigate across the website.

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

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

    

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

Featured iPhones

Find the Smartphone that fit your needs and your budget.

Shop All Latest Deals
Limited time

Apple iPhone XR

$XX/mo.
Reg $XX/mo.

Rated 4 out of 5 based on 45 users

Apple iPhone XR
Shop Now an iPhone Xr

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

20% off

Apple iPhone XR

$XX/mo.
Reg $XX/mo.

Rated 3 out of 5 based on 37 users

Apple iPhone XR
Shop Now an iPhone Xr

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

Limited time

Apple iPhone XR

$XX/mo.
Reg $XX/mo.

Rated 4 out of 5 based on 45 users

Apple iPhone XR
Shop Now an iPhone Xr

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

20% off

Apple iPhone XR

$XX/mo.
Reg $XX/mo.

Rated 3 out of 5 based on 37 users

Apple iPhone XR
Shop Now

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

        

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>

Featured iPhones

Find the Smartphone that fit your needs and your budget.

Shop All Latest Deals
Limited time

Get iPhone XR and save half.

Apple iPhone XR
Shop Now an iPhone Xr

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

20% off

Get iPhone XR and save half.

Apple iPhone XR
Shop Now an iPhone Xr

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

Limited time

Get iPhone XR and save half.

Apple iPhone XR
Shop Now an iPhone Xr

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

20% off

Get iPhone XR and save half.

Apple iPhone XR
Shop Now an iPhone Xr

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

        

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.

  • Connected Home 
  • Travel & Vehicle 
  • Audio Accessories 
  • Fitness Accessories 
        

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>
​
​

Stay connected with the latest tech.

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

  • Connected Home
    Connected Home 
  • Travel & Vehicle
    Travel & Vehicle 
  • Audio Accessories
    Audio Accessories 
  • Fitness Accessories
    Fitness Accessories 
        

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

  • Android Phones
  • Apple iPhone
  • Device Protection+
  • Upgrade Program

Usage & Services FAQ

  • Shared data plans
  • Prepaid plans
  • Military Discounts
  • Coverage
  • 4G LTE
  • Text messaging
  • Video messaging
  • Installment Pricing
  • International services
  • Voicemail to text
            
 
<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

  • Shared data plans
  • Prepaid plans
  • Military Discounts
  • Coverage
  • 4G LTE
  • Text messaging
  • Video messaging
  • Installment Pricing
  • International services
  • Voicemail to text

Phones & Devices FAQs

  • Android Phones
  • Apple iPhone
  • Device Protection+
  • Upgrade Program
            
 
<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>
​

Why Switch to U.S. Cellular ?

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>
​

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
        

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>
​

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
        

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.

Social Link

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-2