- Usage
- Styles
- Content guidelines
- Accessibility
Usage
Use the Title component to create clear, structured headings that improve readability and SEO. It is ideal for page titles, section headers, and content grouping.
Common usage includes:
- Page titles
- Section headings
- Subheadings for grouped content
Dos and don'ts
Do:
- Use proper heading hierarchy (H1 for main title, H2–H6 for subheadings)
- Keep titles concise and descriptive
Don’t:
- Use titles for decorative purposes only
- Skip heading levels (e.g., jumping from H1 to H4)
- Don't use an H1 on pages that contain a Hero component; the Hero already includes an H1 and each page should only have one
Heading scale
The Title component is available in six sizes.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
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
- Default treatment type
- H2 Frame treatment type
Available treatment colors
- The default treatment type has one color treatment type: default
- The H2 frame treatment type has two color treatment type options: primary gradient frame and accent gradient frame
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
The text alignment is a configurable style, and can be centered or left-aligned.
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 one step, increase by two steps, decrease by 1 step, decrease by 2 steps, remove.
Default top margin
The most commonly used setting.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Increase top margin
Choose Increase to add a small amount of empty space above the text in the Title Component.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Decrease top margin
Choose Decrease to remove a small amount of empty space above the text in the Title Component.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Remove top margin
Choose Remove to take away almost all the empty space above the text in the Title Component.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Content guidelines
Content guidelines are principles to follow when writing digital content for Boston Scientific web pages. Following the principles ensures consistency, clarity, and quality.
Sentence case
Use sentence case for headings. Sentence case is the easiest case to scan quickly. When writing in sentence case, only capitalize the first letter of the first word in the heading, with the exception of proper nouns.
