Usage guidelines
Calls-to-action
An arrow will automatically appear on CTA buttons, but not on links.
Unique calls-to-action
For more information on the importance of unique CTAs and how to write effective button, link, and CTA text, refer to Anatomy:
Title links in heroes
If a Hero has a linked title, the Hero should also have a CTA going to the same place to ensure that the user knows that there is an action in the Teaser Hero. Because the title's appearance looks the same if it is linked or not, we need to provide a secondary route for the user to see and act on. Linked titles are generally used to avoid adding long unique wording to the Teaser action.
Hero images
Do:
- Use bleach bypass photography for hero images on health care professional and corporate pages
- Use full color photography for hero images on patient and caregiver pages
- Always add alternative text
- Use file names that are descriptive — this will help with SEO
- Be mindful of image file size: hero images should be 100kb-300kb
Don't:
- Add the brand element into hero images — add the brand element via the component, if needed
- Add text into hero images — add live text in the teaser's fields
- Use image-based gradients or background colors as hero images — use photography and add the brand element via the component, if needed
- Use photos of products on top of a background color or gradient in hero images — product campaign pages may include photos of products in use in hero images
For more information on images outside of the heroes, refer to the Image component.
Left-aligned text block
Use this style when the image is the focal point and the text is concise and to the point.
- Default style
- Accent style
- Assertive style
- Subtle style
The default style has the highest color contrast of all the hero styles, with a white text background and black text. Consider using the default style when the image suits the text overlay color and when the teaser text should be high contrast.
The accent style adds an accent color to the text block. Use this style to add some color to the page or emphasize the teaser’s text content.
The assertive style adds a color overlay on the teaser image. Consider using the assertive style when the image suits the text overlay, when the teaser title and text should contrast from the rest of the page content.
The subtle style removes the text block background color and adds a color overlay to the selected image to ensure that there is enough contrast between the teaser text and the image. Use this style when the teaser image is not important and is used as more of a background texture. Choose either the ghost or the subtle style depending on the image’s color scheme.
Center-aligned text block
Use this style when the image is secondary or when the text needs a larger area.
- Default style
- Accent style
- Assertive style
- Ghost style
- Subtle style
The default style has the highest color contrast of all the hero styles, with a white text background and black text. Consider using the default style when the image suits the text overlay color and when the teaser text should be high contrast.
The accent style adds an accent color to the text block. Use this style to add some color to the page or emphasize the teaser’s text content.
The assertive style adds a color overlay on the teaser image. Consider using the assertive style when the image suits the text overlay, when the teaser title and text should contrast from the rest of the page content.
The ghost style removes the text block background color and adds a color overlay to the selected image to ensure that there is enough contrast between the teaser text and the image. Use this style when the teaser image is not important and is used as more of a background texture. Choose either the ghost or the subtle style depending on the image’s color scheme.
The subtle style removes the text block background color and adds a color overlay to the selected image to ensure that there is enough contrast between the teaser text and the image. Use this style when the teaser image is not important and is used as more of a background texture. Choose either the ghost or the subtle style depending on the image’s color scheme.
Overlapping text block
This teaser type is only allowed within the Carousel component on the home page template, within the hero container.
Keep in mind that the length of text added to this component can overlap the image more and more as the screen size gets smaller. Remember to check all breakpoints to ensure that your image is still visible behind the text block.
Without an image
The selected text block style will take up 100% of the space that an image would have. The minimum height for a hero without an image is 320px.
Optional treatments
The decorative treatment should be used to emphasize the teaser’s content. Do not overuse decorative treatments.
- Pretitle styles
- Brand treatment
- Interactive treatment
- Shadow treatment
Add a pretitle when the teaser content can be grouped into a recognizable content category. The pretitle has three style options: default, assertive, and accent.
When typing in the pretitle text, do not capitalize the text. Screen readers will read each letter out by itself, instead of reading the word. The pretitle style will automatically transform the text to uppercase.
Default pretitle
Assertive pretitle
Use the assertive style to highlight the content category. Do not overuse the assertive pretitle style. It is highly discouraged to use the assertive pretitle along with brand treatment.
Accent pretitle
Use the accent style to bring a pop color to the content. Do not overuse the accent pretitle style.
The brand treatment will add an SVG of the advancing arrows to the top of the text block and an animated brand gradient bar to the bottom of the text block. This style can only be applied to hero teasers in the hero / superhero container. This treatment cannot be combined with the interactive treatment.
The interactive treatment will add an animated bar to the hero when the user hovers or focuses on the title or call-to-action link. Apply this treatment to emphasize the hero’s action. This treatment cannot be combined with the brand treatment.
The interactive treatment works best when there is only one link action — either in the teaser title or just the teaser action.
There are four color options to choose from to apply to the interactive treatment:
The shadow treatment will add a light dropshadow to the hero text block. Apply this treatment to emphasize the hero text block.
Responsive behavior
The Teaser hero itself has a minimum height of 320px, and the Teaser hero image is fluid. The image will scale proportionally to fill 100% of the width of the hero. If the text block’s margin, padding, and content cause the hero to grow in height, the image will maintain its aspect ratio and scale proportionally to fill 100% of the height of the hero. If the image’s aspect ratio does not match the hero’s aspect ratio, the image will be cropped from its horizontal or vertical center to fill the width or height of the hero.
On the extra small and small breakpoints, the text block will be centered and overlap the bottom 96px of the image. The text block will be full-width on the extra small breakpoint.
The rest of the responsive behavior differs slightly depending on the breakpoint and Teaser Type: hero with left-aligned text block or hero with center-aligned text block.
For more information about breakpoints, refer to the Authoring page.
Left-aligned text block
The image will scale from the top right. This means that the top right part of the image will be anchored on the page and the rest of image will resize as the viewport resizes.
On the medium, large, and extra large breakpoints, the text block will be positioned on top of the left side of the image.
On the small and medium breakpoints, the width of the text block will be determined by the content, with a maximum width of 440px. The maximum width of the text block will increase to 480px on the large and extra large breakpoints.
Center-aligned text block
The image will scale from the center. This means that the center of the image will be anchored on the page and the rest of image will resize as the viewport resizes.
On the medium, large, and extra large breakpoints, the text block will be positioned on top of the center of the image.
On the small breakpoint, the width of the text block will be determined by the content, with a maximum width of 480px. The maximum width of the text block will increase to 800px on the medium, large, and extra large breakpoints.
