The hero component defines the subject of a page and sets the overall tone for the rest of the page content. The hero type is closely associated with the level at which a page is located in the site hierarchy. For example, the more graphic hero versions (such as the Full Width Photo Hero”) should be used at top level pages, and the more text-based hero versions (such as “Basic Title”) should be used at lower levels for content-heavy pages.

Consider the amount of images used in the rest of the page content before selecting a hero option which features an image. A visually balanced layout is desired.

Examples

Full-width Variant

This hero variant is used on home pages and top-level landing pages.

View by Screen Size

Welcome Back!

With myCigna you can quickly find your ID card info, view claims, estimate costs for care, and more.

Implementation

Element Design Content
Background Image

Photos use the same crop and aspect ratio, but different source sizes and positioning across breakpoints.

Use spacing increments shown to set height and buffer space around hero.

Sizing by breakpoint:
Extra small
576 x 144 px
Small
768 x 192 px
Medium
992 x 248 px
Large and above
1440 x 360 px

Follow brand and digital standards for Images.

White Box
  • Box is only used on XL,L,M breakpoints. S,XS photo sits above text.
  • Border Weight: 2px
  • Border Color: $gray-15
  • Corners use $radius-l
  • Box width is based on grid columns
  • Box height is static per breakpoint:
    • XL: 328px
    • L: 284px
    • M: 248px
The content should fit within the box across breakpoints — see character ranges below.
Page Name or Creative Heading
  • Text Color: $digital-black
  • In general, keep page titles as short as possible and avoid awkward line breaks and lone words that make the text look unbalanced and create excess space (not always possible across all breakpoints - make best efforts)
In most cases, heading should be no more than 1-2 lines of text on large screens, 20-40 characters at most. Heading can be a noun or phrase. Write in title case.
Lead Paragraph Lead paragraph should sit on exactly 3 lines when the white box is present (2-4 on small screens outside the white box) - approximately 90-120 characters. Write in sentence case.
Action Link CTA
  • Use the action link style CTA.
  • Use normal $body-text size on all breakpoints except M – on M, use $small-text size for link to match paragraph
Action links should not wrap on larger screens, but may be 1-2 lines on smaller screens - typically 10-30 characters to fit within the white box in this component.

Floating Image Variant

This hero variant is used on other landing pages.

View by Screen Size

Cigna Supplemental Benefits

Plan for the unexpected

Supplemental insurance policies can help pay for many expenses that aren't covered by your primary health insurance.

Implementation

Element Design Content
Background Gradient

180 Degrees from $white to $digital-blue-10

Legal Entity Name

Use only if required for compliance reasons. When this element is not used, page name and photo would move up.

Typically around 50-70 characters - keep as short as possible. May contain link to a modal or page if needed to include a list of multiple affiliates.

Image
  • Border Weight: 2px
  • Border Color: $gray-15
  • Corners use $radius-l
  • Width and positioning of photo varies by breakpoint
    • When photo is next to text (breakpoints XL,L,M) the top of photo should align with the top of the page name
    • When stacked (S,XS breakpoints), the photo should be above the page name and below the legal entity name if present

Follow brand and digital standards for photo selection.

Page Name or Creative Heading
  • Text Color: $digital-black
  • In general, keep page titles as short as possible and avoid awkward line breaks and lone words that make the text look unbalanced and create excess space (not always possible across all breakpoints - make best efforts)

In most cases, heading should be no more than 1-2 lines of text on large screens, 20-40 characters at most. Heading can be a noun or phrase. Write in title case.

Lead Paragraph
  • Use the $body-text type treatment on breakpoints below Large
  • Use the $lead-paragraph type treatment on breakpoints above Large
Lead paragraph should be 2-3 lines of text on large screens (3-6 on small screens) - approximately 70-180 characters. Write in sentence case.
Button Primary CTA OR Action Link CTA (optional) Use primary button style with very short text to draw attention to the most important call to action on the page. If text needs to be longer and/or if the CTA is a lesser priority, use the action link style. Keep buttons as short as possible - typically less than 10 characters, but up to 20 at the most if needed. Make sure button text does not wrap on small screens – buttons should always be only on one line. Follow Digital Standards guidance on button text.

Action links should not wrap on larger screens, but may be 1-2 lines on smaller screens - typically 10-50 characters.
Phone Secondary CTA (optional — only available if also using Button CTA) Do not wrap - stack under button on XS breakpoint

Phone number should be a clickable/tappable link on devices with phone capabilities

Uses same font/size as button text but $digital-black, vertically aligned middle with button
Use "or call us [phone number]". If a different prompt is required, stick to 12 characters or less and make sure the text does not wrap on small screens.

Long Intro Variant

This hero variant is used on case study pages.

View by Screen Size

Case Study | August 2019

Improving Health Becomes a Walk in the Park

In one year, with the help of Cigna, the Schaumburg Park District transformed its annual health fair into a year-long employee health improvement strategy designed to boost productivity and employee wellness.

Implementation

ElementDesign NotesContent Notes
Background Gradient 180 Degrees from $white to $digital-blue-10  
Meta Use the $accent-small type treatment Date stamp and content type should be stored as metadata fields in the CMS
Media Title 
required
  • Text Color: $digital-black
  • In general, keep page titles as short as possible and avoid awkward line breaks and lone words that make the text look unbalanced and create excess space (not always possible across all breakpoints - make best efforts)
Media pages using this hero may have longer titles than other pages. Still aim for 20-40 characters for most pages, but more descriptive media titles can go up to around 70 characters (1-3 lines on larger screens, 1-6 lines on smaller screens). Write in title case.
Lead Paragraph 
required
Lead paragraph should be 2-4 lines of text on large screens (6-12 on small screens) - approximately 200-300 characters. Write in sentence case.
Image
  • Border Weight: 2px
  • Border Color: $gray-15
  • Corners use $radius-l
  • Width and positioning of photo varies by breakpoint
Follow brand and digital standards for photo selection.

Plain Variant

This hero variant is used on product detail pages.

View by Screen Size

Cigna Group Disability Insurance

Coverage for your employees during a short or long term disability

or call us at 1 (855) 358-8528

Implementation

ElementDesign NotesContent Notes
Background Gradient 180 Degrees from $digital-white to $digital-blue-10  
Legal Entity Name 
optional
Use only if required for compliance reasons. When this element is not used, the elements below move up. Typically around 50-70 characters - keep as short as possible. May contain link to a modal or page if needed to include a list of multiple affiliates.
Page Name or Creative Heading 
required
  • Font Color: $digital-black
  • In general, keep page titles as short as possible and avoid awkward line breaks and lone words that make the text look unbalanced and create excess space (not always possible across all breakpoints - make best efforts)
In most cases, heading should be no more than 1 line of text on large screens, 20-40 characters at most. Heading can be a noun or phrase. Write in title case.
Lead Paragraph Lead-in should be 1-2 lines of text on large screens (1-6 on small screens) - approximately 20-140 characters. Write in sentence case.
Button Primary CTA 
optional
Use primary button style to draw attention to a main call to action Keep buttons as short as possible - typically less than 10 characters, but up to 20 at the most if needed. Make sure button text does not wrap on small screens – buttons should always be only on one line. Follow Digital Standards guidance on button text.
Phone Secondary CTA 
optional; only available if also using Button CTA
Do not wrap - stack under button on XS breakpoint
Phone number should be a clickable/tappable link on devices with phone capabilities

Uses same font/size as button text but $digital-black, vertically aligned middle with button
Use "or call us [phone number]". If a different prompt is required, stick to 12 characters or less and make sure the text does not wrap on small screens.

Basic Title Variant

This hero variant is used on detail and topic pages.

View by Screen Size

Cigna Group Disability Insurance

Coverage for your employees during a short or long term disability

Implementation

ElementDesign NotesContent Notes
Legal Entity Name 
optional
Use only if required for compliance reasons. When this element is not used, the elements below move up. Typically around 50-70 characters - keep as short as possible. May contain link to a modal or page if needed to include a list of multiple affiliates.
Page Name
  • Font Color: $digital-black
  • In general, keep page titles as short as possible and avoid awkward line breaks and lone words that make the text look unbalanced and create excess space (not always possible across all breakpoints - make best efforts)
In most cases, page name should be no more than 1 line of text on large screens, 20-40 characters at most. Page titles can be nouns or phrases. Write in title case.
Lead-In 
optional
Only use a lead-in if it will be useful to users to expand on the title or otherwise set context for the page.

Avoid using a lead-in if the page has a required Legal Entity Name [1], as having all three fields filled with long lines of text can make the top of the page look crowded. Using all three lines is best when the text is on the short side, such as the Media Meta example.

Lead-in should be 1-2 lines of text on large screens (1-6 on small screens) - approximately 20-140 characters. Write in sentence case.

Icon Variant

This hero variant is used on topic landing pages.

View by Screen Size

Dental Health

When you care for your teeth, your whole body benefits. Learn about children's dental care, senior dental care, and other oral health topics.

Implementation

ElementDesign NotesContent Notes
Background Gradient 180 Degrees from $white to $digital-blue-10  
Icon 
required
Use standard sizes for icons across breakpoints:
XL,L,M : 144x144
S: 88x88
No Icon on XS
Select icon that directly relates to the subject matter. This hero is used for Topic Pages, which are typically accessed via a Featured Topics Grid that leverages the same icon at a smaller size.
Page Name or Creative Heading 
required
Use $display-desktop on L, XL breakpoints
Use $display-mobile on XS, S, M breakpoints
In general, keep page titles as short as possible and avoid awkward line breaks and lone words that make the text look unbalanced and create excess space (not always possible across all breakpoints - make best efforts)
In most cases, heading should be no more than 1 line of text on large screens – 10-20 characters is typical (up to ~30 characters if a longer title is absolutely necessary). Heading can be a noun or phrase. Write in title case.
Lead Paragraph 
required
Use the $lead-paragraph type treatment Lead paragraph should typically be 2-3 lines of text on large screens (3-6 on small screens) - approximately 70-180 characters. Write in sentence case.