- Usage
- Configurations
- Styles
- Accessibility
Usage
Use the Carousel Component to present multiple related items in a single space, allowing users to browse through them without leaving the page. The Embed (media) Component can be used to add a video to a Carousel.
Common usage includes:
- Physician testimonial videos
- Featured stories
- Campaign highlights
Dos and don'ts
Do:
Ensure each slide has a brief title and a concise description
- Allow users to control when slides transition
- Apply the same teaser type to all slides (this ensures visual consistency)
Don’t:
Hide critical information only in Carousel slides
Hero Carousel
The Hero Carousel is a specific version of the Carousel component, and it is only used on the BSC.com homepage.
Configurations
Configurations demonstrate the ways a component can be combined with other component(s) in AEM.
Carousel with Image component
Images can be added to a Carousel. See the Image component detail page for more information.
Carousel with Embed component
Embedded media such as video can be added to a Carousel. See the Embed (media) component detail page for more information.
Carousel with Card (teaser) Component
Teaser cards can be added to a Carousel. See the Card (teaser) component detail page for more information.
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.
Available treatment types
- Carousel with Image component
- Carousel with Embed (media) component
- Carousel with Card (teaser) component
Available treatment colors
- The Carousel with Image component treatment type has X treatment color options to choose from:
- The Carousel with Embed (media) component treatment type has X treatment color options to choose from:
- The Carousel with Card (teaser) component treatment type has X treatment color options to choose from:
Using the functional treatment
The functional treatment should be used to change the way a component operates to make it better fit the use case on a web page.
Text alignment
Options include: Centered or left.
Top margin
Apply top margin to create space between this component and another component or to create more space within a container component. Options include: default (selected by default), increase by 1 step, increase by two steps, decrease by 1 step, decrease by 2 steps, remove.
