Skip to main content

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

<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

Individual & Family Health Insurance

Hero Title

This hero has a small amount of flexibility. If this paragraph is kept short you can have either a button CTA or a few arrow link CTAs or no CTA at all.

Note: image size for this hero is 705x281

View PlansOpens a new window

 

Hero 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 and the specs are 700 x 220. 

Note: this image size is 700x220

For images used on pages WITHOUT left navigation, the image width should be 940 width with a variable height. The only exception is if you're using the actual hero component. Then you'll need a 940 width x 281 height, but only 587 x 281 of the image will display and the left side will have some transparency with text over it.

Home Image Banner

Typically the image banner below is designed by Creative Services and 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.

Note: The specs for the homepage banner are 940x205. 

When we used the "Dig In" banner, the size was 940 x 205. The designer added 78 pixels of white space on the right so the image itself is 862 x 205 plus 78 white space pixels in order to make the 3-pack align with the image because when we put 3 columns on the page, it doesn’t span 100% of the width of the page.

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. 

Title and text component with background.

This is a custom component has a background, icon and text.

It can have one paragraph of content or many paragraphs. It can also be 1 column or span 2 columns (across the entire content area of the page.

 Title and text component without background.

This is a custom component has an icon and text. The text can wrap around the icon, or it doesn't have to, like the component on the left. The icon could also be moved to the right in the box and the text can wrap around the left.

It can have one paragraph of content or many paragraphs. It can also be 1 column or span 2 columns (across the entire content area of the page.

This is a Title and Text component that is two columns. 

This is a pretty common component that has a background and can have content configured like the rest of the components on this page.

Button for a CTAOpens a new window

Image Header Strip Components

These components are configurable in 3 columns, 2 columns or one column with or without images.

Medical

Find a health insurance plan that meets the needs of your business.

Learn more

Request a quoteOpens a new window

Dental

We have a dental plan that can meet your budget.

Learn more

Vision

We offer plans for eye care coverage. See what works for you. 

Request a quoteOpens a new window

Image Header Strip w/ 1 link

Get the latest news and information on health care reform changes that may affect your business from our United for Reform Resource Center.

Here is the Call to Action link

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.

Short Term Health Insurance

In times of change, find short term solutions that help you bridge the gap.

Find Plans

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.

Learn More

Buttons and Other CTAs

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

Accent Blue (#00A8F7 ) - Do not use - does not pass A11y AA contrast standards

Dark Blue  (#122377)

Dark Digital Grey  (#2D2D39)

Digital Grey  (#757588)

Digital Green (#0D880B)

Orange  (#c03c00)

Drop down component

Also known as a JumpMenu component, the drop down component expands and offers options to a user. It is typically used to display a list of states or products. 

Accordion or Drawer Component

This is a unique component that allows for copy to be hidden under a drawer. The text of the headline for the drawer is NOT configurable - it is essentially an H3 - and that cannot be changed.

You can have an image within this component, but other than that, there are some limitations.

Call to action

This is where more of your copy goes. You can have many CTAs within this component, too.

Call to Action 1

Call to Action 2

Call to Action 3

One thing we cannot do in here is host a video. But we can put in plenty of copy along with images. 

Videos

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.

Testimonials from our value-based care partners

Share and Print Bar

Disclaimer

1This is what disclaimer text looks like. It typically goes above the footer in the page. Often times we use either an asterisk "*" or we use superscript numbers to identify what a disclaimer is referring to. 

Horizontal Line Breaks

This paragraph text is here to demonstrate the spacing surrounding a Horizontal Line Break.

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

NOTE: This is a style class in AEM. It is not an image. 

Custom Pages with no Left or Global Navigation

This link will take you to a page showing how a custom page could be laid out.

All of the components listed on this page can be applied to a custom page as well.

Looks like your browser is a little out-of-date.

Experience uhc.com at its fullest by upgrading to a newer version of one of these browsers: