Icon teasers are sets of links with related icons that move users to relevant information on other parts of the digital property.

Examples

1x Left Icon Variant

Each row represents one instance of the component variant. This example shows the component stacked 5 times for context.

View by Screen Size

1x Left Icon with Blurb Variant

Each row represents one instance of the component variant. This example shows the component stacked 5 times for context.

View by Screen Size

Health Insurance

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Medicare

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dental Plans

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Supplemental Insurance

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

International Coverage

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3x Top Icon Variant

Each row represents one instance of the component variant. This example shows the component stacked twice for context.

View by Screen Size

Implementation

ElementDesignContent
Icon

Use standard size and line weight for link grid brand icons:

Both the icon and link heading are clickable as a single link. On hover/active, icon fill and stroke change to $cigna-blue-dark.

Make sure the same icon is never used for different links on the same page. If possible, avoid using the same icon for different meanings for a given audience (may be unavoidable in some cases given the limited icon set).
Link Heading Text may be 1 or 2 lines across different breakpoints – staying around 10 characters is safest, however longer links may go up to ~20 characters. Check for/avoid awkward wrapping and adjust if needed.
Blurb Use $body-text Text may be 1-6 lines across different breakpoints – approximately 50-150 characters. Check for/avoid awkward wrapping and adjust if needed.