Welcome to the UHC digital pattern library

We have options.

We may have limited components for uhc.com, but it is helpful to know what is possible. The intent of this page is to share options on what is possible. Anything you see here can be built by the UHC Digital Marketing team in our content management system, AEM (Adobe Experience Manager).

Take a look at what we have to offer for:

Headings

Styling options:

Color Variation: This changes the color to Dark Grey.

Center Alignment: This changes the alignment of the text so that it is centered within its container.

Heading with light gray background: This adds the accent gray background color, just as the name suggests.

<H1> This is what a Heading 1 looks like.

<H2> This is what a Heading 2 looks like.

<H3> This is what a Heading 3 looks like.

<H4> This is what a Heading 4 looks like.

<H5> This is what a Heading 5 looks like.
<H6> This is what a Heading 6 looks like.

<p> This is what paragraph text looks like. This is what paragraph text looks like. This is what paragraph text looks like. This is what paragraph text looks like. This is what paragraph text looks like. This is what paragraph text looks like.

Hero Components

Landing page hero banner

Recommended sizes for banner layouts:

  • 100% width:    763px x 215px
  • 70/30 width:    534px x 300px
  • 50/50 width:    379px x 300px

Border: All banners have the ability to turn OFF or ON a 1 px Accent Grey border. 

Background Colors: Available background color options are white, light accent gray, or light accent blue. 

Content page image banner

Typically the image banner below is designed by Creative Services and is used at the top of a content page. It can be stock photography or designed with blue hues. 

Full-width template:

  • 1024px x variable height (preferred 300px)
  • Recommended image aspect ratio=19:6
  • Internal spacing=45 px all sides (when using text overlay)

Template with internal navigation:

  • 763px x variable height
  • Recommended image aspect ratio = 14:6
  • Internal spacing=30 px all sides (when using text overlay)

Note: this image size is 700px x 220px and has been stretched to fill the space: 748px x 235px using the stretch to fill option.

Home image banner

Typically the image banner is used at the top of the home page. Here it is displayed WITH left navigation because that is how this DPL was built - but in reality it would span the entire width of the page WITHOUT left hand navigation.

Recommended size: 1024px x 300px

Components

There are dozens of ways you can use our components because in many of them, there is flexibility with images, icons, headlines, copy and the order in which you use these elements. Below is a sampling of our components. 

Note: These components can be used for either landing pages or content pages. 


Content with background component

This component has an optional border, 3 background colors (white, accent gray, or light blue), and a fairly flexible container that will typically hold headings, icons/images, text, and CTAs.

The components inside stack vertically and text does not wrap. Images may be positioned left, right, or centered horizontally, and set to not scale or scale to fill the width of the container.

It can have one paragraph of content or many paragraphs. It can also be nested in a grid or content block gallery component to fill a column or span across the width of the page.

Content with background component

This component has an optional border, 3 background colors (white, accent gray, or light blue), and a fairly flexible container that will typically hold headings, icons/images, text, and CTAs.

The components inside stack vertically and text does not wrap. Images may be positioned left, right, or centered horizontally, and set to not scale or scale to fill the width of the container.

It can have one paragraph of content or many paragraphs. It can also be nested in a grid or content block gallery component to fill a column or span across the width of the page.

Content with background component

This component has an optional border, 3 background colors (white, accent gray, or light blue), and a fairly flexible container that will typically hold headings, icons/images, text, and CTAs.

The components inside stack vertically and text does not wrap. Images may be positioned left, right, or centered horizontally, and set to not scale or scale to fill the width of the container.

It can have one paragraph of content or many paragraphs. It can also be nested in a grid or content block gallery component to fill a column or span across the width of the page.

This is a Content with Background component that is two columns

This component has an optional border, 3 background colors (white, accent gray, or light blue), and a fairly flexible container that will typically hold headings, icons/images, text, and CTAs.

The components inside stack vertically and text does not wrap. Images may be positioned left, right, or centered horizontally, and set to not scale or scale to fill the width of the container.

It can have one paragraph of content or many paragraphs. It can also be nested in a grid or content block gallery component to fill a column or span across the width of the page.


Content block component

This component is similar to the content with background, but the border is persistent. It contains the default components heading, image, text, and CTA, but you may delete or reorder any of these. 

This component can be displayed side-by-side in a grid or content block gallery component. There can be multiple columns 

Note: The 3 content blocks are within a content block gallery component, which is set to equal height headings and forces the CTAs to the bottoms of the content blocks.


Cross sell box components

These components can be used as cross sell boxes (promotional boxes at the bottom of a page) or they can be used as a tile on a landing page or customized for a content page. Typically, they are a mix of banner, content blocks, or content with background components.

Self-employed plans

If you’re self-employed, you may qualify for individual coverage. Choose from a variety of plans made to fit your needs and budget.


CTA component

Buttons

(#196ECF) This is the button we use 95% of the time.

The contrast ratio is: 5.0:1 and meets WCAG 2.0 accessibility guidelines.

This is an alternate button option and is used more on content or campaign pages. Notice how longer link text causes the button to grow vertically.

The contrast ratio is The contrast ratio is: 5.0:1 and meets WCAG 2.0 accessibility guidelines.

 

This is primarily used on Medicare/Medicaid pages within the Plan Finder component, but it is used sparingly on some campaign pages.

The contrast ratio is: 5.4:1 and meets WCAG 2.0 accessibility guidelines.

Links

Internal links

Internal links receive the icon with the arrow to the right unless they are within a paragraph.

External links

External links or links that open in a new window receive an icon with arrow pointed to the right 45 degrees. 


Jump Menu component

the Jump Menu component is a drop down or select menu component. It expands and offers a list of link options to a user. It is typically used to display a list of states, products, or assets. The list be displayed in columns or a single list, and in its opened state, the caret flips to face up, and the new shape takes on the appearance of a page with a tab.

Collapsible content component

This is a container component that allows for content to be hidden under a drawer. Each drawer has a consistent look with a heading to describe the container's content.


Video component

Our videos are hosted in either the Brightcove video cloud or on YouTube. Our content management system, AEM, has a connector that allows our components to pull from one of these two services in order to display a video. We have several possibilities on ways to arrange video components.

Title, caption, or image overlay can be turned on or off. Videos are required to have closed captioning. Both video platforms support closed captioning, and all that is required is a closed caption file in vtt format. Alternate text transcripts are also required. These are added as content fragments within AEM assets, linked to the videos, and then display in the accordion for the video player. 

Digital Member Experience

Share component


The Footnote component can be used for either Disclaimers or Footnotes. Disclaimers are general text that apply to the whole page and are not numbered. This portion of the component may also be used for "sources." Footnotes relate to a specific piece of text and are noted with superscript numbers to call attention to them. When users click on the number, they will see a pop-up bubble with the important footnote text inside.

Americans suffer 1.5 million heart attacks and strokes each year. 1 About 1.6 million new cancer cases are expected to be diagnosed in the U.S. this year. 2 Then consider that many employees are not prepared for high, unexpected costs. Almost two in three U.S. workers say they have less than $1,000 on hand to pay the out-of-pocket expenses of an unexpected, serious illness or emergency.

According to Ambest.com 4

Disclaimer

This is what disclaimer text looks like. It typically goes above the footer in the page.

Footnotes

  1. American Heart Association. Disease and Stroke Statistics 2017 Update. A Report From the American Heart Association; Mar. 2017. Web.
  2. American Cancer Society. Cancer Facts & Figures 2017. Atlanta: American Cancer Society; 2017. Web.
  3. Weschler, Pat. “63% of Americans Can’t Cover Unexpected Expenses.” Fortune. 63% of Americans Can’t Cover Unexpected Expenses. Time Inc., 06 Jan.
  4. Ratings as of 8/3/2017.A.M Best is a worldwide, independent organization reviews insurance companies and other businesses and publishes opinions about them.This rating is an indication of financial strength and stability.
    For the latest rating, access ambest.com

Tooltips

Tooltips are indicated by a double underline under a term. Users click on the tooltip to read the definition. Read more about 'tooltips' here.

No matter which plan you choose, you’ll pay a monthly payment premium to keep your health insurance coverage. You may also pay each time you receive medical care co-payment you pay for a covered health care service, usually when you receive the service. or co-insurance. Generally, the more you pay per month (premium), the lower your deductibles.


Horizontal rule

This paragraph text is here to demonstrate the spacing surrounding a Horizontal Rule. This is what has been used to separate the description for each component.


This second set of paragraph text is here to demonstrate the spacing surrounding a Horizontal rule.


Accessibility

Error Messaging

  • Font-weight:600
  • Color:#e91b18
  • Contrast Ratio: 4.5:1

Press the 'Find Plans' button without entering a zip code to view the error message.

Global Visible Focus Color

The visible global keyboard focus indicator for users who navigate the site by keyboard. 

Outline-color: #196ecf

Contrast Ratio: 3.01:1

Video Close Captioning and Text Transcripts

Every video placed on UHC.com is provided with close captioning and an available alternate text transcript that is kept in the drawer attached to the bottom of the video component.

Image Best Practices

Acceptable file types

  • jpg
  • png
  • gif

Preferred maximum file sizes

  • Banner images = < 200kb
  • Thumbnails = < 50kb
  • Icons = < 10kb 
  • PDFs = < 1Mb