Background colors
Add components within the container to control the background color of the component group.
Default, ghost, subtle, & subtle gradient
Don’t use ghost component or type styles on default, ghost, subtle, & subtle gradient background colors. These options can only be applied to containers in the page content area.
Default
Ghost
Subtle
Subtle gradient
Action
This background color should only be used in association with true actions, meaning signing up for email updates, contacting Boston Scientific for help, or requesting a demo.
Action
Assertive gradient, assertive, and accent
Only use ghost styles on assertive gradient, assertive, & accent background colors.
Do not use the following components on these background colors:
- Accordion
- Download
- Formstack via the External App container component
- Tabs
Assertive gradient
Assertive
Accent
Decorative treatments
The shadow treatment is the only treatment that should be combined with the others.
- Background patterns
- Accent border
- Shadow
- Top bottom split
There are three options for adding a repeating pattern to the container component: default, subtle, assertive, and accent. Do not overuse the pattern option. A good rule of thumb is one pattern per page.
Default pattern
The default pattern is used on these background colors:
- Default
- Ghost
- Subtle
- Subtle gradient
Assertive pattern
The assertive pattern will only be shown on containers with the assertive and assertive gradient background colors.
Accent pattern
The accent pattern will only be shown on containers with the accent background color.
Action pattern
The action pattern will only be shown on containers with the action background color.
Responsive behavior
The pattern image is set to contain. Contain scales the image as large as possible within its container without cropping or stretching the image. If the container is larger than the image, this will result in image tiling, unless the ‘background-repeat’ property is set to ‘no-repeat’.
Add an accent border to emphasize the container’s importance on the page.
Do not overuse the pattern option. A good rule of thumb is one pattern per page.
Do not combine the accent border and the pattern treatment in one container.
Default, ghost, subtle, subtle gradient, and action
Assertive and assertive gradient
Accent
Add a shadow to emphasize the container’s importance on the page. Do not overuse the shadow treatment.
Default, ghost, subtle, subtle gradient, and action
Assertive and assertive gradient
Accent
The top bottom split treatment allows the container height to be split into halves with the top half inheriting the background color and the bottom half remaining transparent. This creates an overlapping effect. Only use this for images, videos, or carousels.
Do not use for text.
Do not combine with the shadow treatment or accent border treatment.
Default
Ghost
Subtle
Subtle gradient
Action
Assertive gradient
Assertive
Accent
Page header container
Only apply the Page Header style to the breadcrumb container when the heading 1 appear directly after the breadcrumb component. Do not apply the Page Header style if the heading 1 appears in the page hero.
Spacing options
Top margin
Black background color represents container margin
Default
Default - 3rem (48px)
Increase by two steps
Increase by two steps - 6rem (96px)
Increase by one step
Increase by one step - 4rem (64px)
Decrease by one step
Decrease by 1 step - 2rem (32px)
Decrease by two steps
Decrease by 2 steps - 1.5rem (24px)
Padding
Default
Default inner padding
Increase
Increased inner padding
Decrease
Decreased inner padding