- Usage
- Styles
- Animations
- Accessibility
Usage
Use the Container component to group related content and maintain consistent alignment across different screen sizes. It is ideal for creating modular layouts and organizing complex pages.
Common usage includes:
- Grouping different content types together such as text and media
- Structuring layouts to support responsive web design
- Highlighting key information or creating call-outs
Dos and don'ts
Do:
- Use containers to maintain alignment and spacing
- Use containers to create more visually balanced layouts
- Nest components logically for better content hierarchy
- Apply responsive settings for mobile optimization
- Modify text color and icons to meet accessibility requirements for different background colors
- Apply padding and spacing that works on all devices
Don’t:
- Over-nest containers unnecessarily
- Use containers for single components without specific layout requirements
- Add dark text or dark icons to dark background colors or add light text and light icons to light background colors
- Apply large spacing or padding when you have callout text with long words
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.
Brand treatments
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.
Available treatment types
- Shadow treatment
- Works best on Default or Ghost background colors
- Bottom gradient border
- Can be used on all background colors, but works best on Default or Ghost with Shadow, Action Blue, Dark Blue, or Assertive
- Arrow pattern
- Works on all background colors, not recommended on Default or Ghost unless the Shadow treatment is also applied
- Top-bottom split
- Only works on Subtle, Action Blue, Primary Accent, and Assertive background colors
- To use this, you need to add 3 containers:
- The first container should have a solid background color.
- The second container will be placed below it and have the same background color with Top-bottom split applied.
- The third container can be nested inside the Top-bottom split container; recommend using Subtle or Ghost with Shadow treatment for that container
Functional treatments
Functional treatments are used to change the layout or spacing of a component.
Available treatment types
- Padding
- Creates space on the inside of the container
- Options inlcude: Default, Decrease, Increase, Increase by 1 step, Increase by 2 steps, Decrease by 1 step
- Top margin
- Used to create space between a container another element directly above it
- Options include: Default, Increase by 1 step, Increase by 2 steps, Decrease by 1 step, Decrease by 2 steps
- Justify content
- Allows content to be vertically centered within a parent container.
- Options include: Justify-default, Justify-increase, Justify-decrease. These selections determine how much padding is on the side of the content withint the parent container and determing how much content is on the top and side on mobile.
- To use this, you need to add at least 2 containers or 1 container and an image:
- The first container is the parent container is where the 'Justify Content' is applied.
- The child containers or container and image will be nested in the parent container: If using a title, text, and button, it needs to be in a container to work.
- Equal height cards
- Enables teaser cards to be the same height in horizontal layouts within a container component. The teasers need to be siblings for this to work, do not nest in containers.
- Content height match
- Enables text in a container and an image in the container to always be the same height; when the height of the content changes, the height of the image adjusts to match it
- To use this, you need to add 2 containers and an image:
- The first container is the parent container is where the 'Content height match' is applied.
- The second container will be nested in the parent container and will have text, buttons, etc.; You can add padding to this container to create a more balanced layout
- The final item is an image component. The image component must be sibling of a container component for this to work.
Animations
Animations are used to create a more dyanmic, engaging web experience by drawing attention to or highlighting key information on webpages by using subtle movements, autoplay videos, or color changes.
Dos and don'ts
Do:
- Use the arrow pattern animation to draw attention to a key call-to-action.
- Use the background color change animation to draw attention to key information such as a how it works video, product highlights, or other differentiators.
- Use the background animation on full bleed containers.
Don't:
- Don't use the background color animation on PDPs
- Don't use this animation on multiple sections in a row.
- Don't use the background color animation on containers that aren't full bleed.
- Don't use the arrow animation on multiple sections of a page.
Examples
Arrow animation demo
Background animation
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
