Component

Hero component (teaser)

Hero (teaser) overview

The Hero component is a high-impact visual element placed at the top of a page to introduce the main theme or message. It combines imagery, headline text, and optional supporting content to create a strong first impression.

See all examples

Usage
Variations
Styles
Authoring
Accessibility

Usage

Heroes are designed to establish the primary focus of a page and provide a visually compelling entry point for users. Heroes also reinforce brand identity through imagery and typography.

Heroes live at the top of the page and usually contain a header, call-to-action, and description, as well as image, branding, and styling options.

Common usage includes:

BSC homepage
Detail pages for patients and HCPs
Campaign landing pages

Dos and don'ts

Do:

Use high-resolution images aligned with Boston Scientific brand standards
Keep headlines concise and action-oriented
Ensure CTA text is clear and concise
Use a hero style with the advancing arrows on BSC.com
Use the same hero style on the same type of pages (e.g. Medical specialty landing page)

Don’t:

Overcrowd the hero with excessive text
Include marketing language in headers on non-campaign pages or pages that are indexed
Add competing CTAs
Include imagery that doesn't help the user understand the purpose of the page or doesn't match the audience segment

Variations

Variations are different versions of the same component with visual or structural differences depending on context.

Heroes with image options

Hero with image has several options that are configured using the teaser component.

Hero with left aligned text

Usage guidelines:

Use this variation when you have a wide angle image, the entire image doesn't need to be visible on all devices,

Common usage includes:

Treatment and condition pages
Device support pages
Campaign pages

Hero with video/image

Usage guidelines:

Use this variation when you have an image or video and want to include some additional branding.

Common usage includes:

Flagship product page
Portfolio landing page
Campaign pages

Hero with modular layout

Usage guidelines:

Use this variation to show multiple images or a combination of images and videos for a product or to show a mix of product and clinical setting imagery.

Common usage includes:

Flagship product page
Portfolio landing page
Campaign pages

Hero with large arrow

Usage guidelines:

Use this variation when you have a single image and want to add additional branding to a campaign.

Common usage includes:

Campaign pages

Hero carousel with expanded content

Usage guidelines:

Use this variation to connect the hero to deeper content on the page and help lead users down the page to more content.

Common usage includes:

Campaign pages

Hero with overlapping text

Usage guidelines:

This variation is used for the Boston Scientific homepage.

Common usage includes:

Boston Scientific homepage

Heroes with text-only options

Hero without image has several options that are configured using the teaser component.

Hero with arrow pattern

Usage guidelines:

Use this variation to add additional branding to a detail page that doesn't have an image.

Common usage includes:

Flagship child pages
Procedure child pages
Device support child pages
Treatment and condition child pages

Hero with accent border

Usage guidelines:

Use this variation for transition pages or detail pages that don't have images, serving as the page's header, while including brand elements.

Common usage includes:

Medical specialty landing page
Product listing page
Product landing page
Indications, safety, and warnings

Hero with video/image

Usage guidelines:

Use this variation when you have an image or video and want to include some additional branding.

Common usage includes:

Flagship product page
Portfolio landing page
Campaign pages

Styles

Styles are used to visually amplify the Boston Scientific brand. Styles carry different brand or functional treatments that bring a distinctive look to our webpages while also helping to emphasize key information.

Using the brand treatment

The brand treatment should be used to visually emphasize content and provide a more tailored and distinctive look and feel to a webpage. Be mindful not to overuse and avoid treatment competing with other imagery. Ensure a balanced visual hierarchy.

This treatment is applied by selecting a treatment type and treatment color.

All Hero components should use a brand treatment on BostonScientific.com. The treatment for Hero components is the 'Brand Element' which applies the Advancing Arrows to the component. This is required to help ensure a distinct and recongizable look to all webpages as soon as user lands on the page.

Additional branding options can be found in each Hero configuration.