Components

The Components showcase the reusable building blocks of Advocate Health's design system, designed to streamline development and ensure consistency.

Explore a comprehensive library of components, including alerts and banners, forms, and navigation, designed to create seamless and user-friendly experiences.

 

Component categories & organization

Components in Advocate Health’s Design System are organized into clear categories to ensure consistency and ease of use. Each category is assigned a letter for quick reference:

  • A – Alerts
  • B – Banners
  • C – Content components
  • I – Integrations
  • F – Forms
  • N – Navigation
  • S – Search

This structured approach streamlines development and helps teams quickly find the components they need. 

Component content guidance

The following section highlights content guidance that is applicable across multiple components. Review individual entries for component specific content guidance.

 

Writing H1

  • The H1 should directly and clearly state what the page is about.
  • Avoid vague and overly creative phrasing.
  • Often the H1 aligns with the page URL, but SEO guidance may require slight adjustments, such as adding keywords. See about us page example.
  • In general, use sentence case for H1. This means capitalize only the first word of the sentence and words that would normally be capitalized, such as a hospital name. Some exceptions to use title case include creative brand copy treatments.

CTA button copy

  • For the CTA button copy, use sentence case.
  • CTAs should be descriptive and clearly state what action users should take.
  • CTAs should be kept at 30 characters or fewer.
  • Typically we use the same CTA throughout a service line or relevant condition, treatment or diagnostic tool page (e.g., Find a cancer specialist).
  • If there’s no CTA, the optional category would be left blank.

Photo and video

  • If using an image, include alt text. This descriptive text will explain each photo if the images don't appear or if a person with visual impairment is using a screen reader on the page.
  • If using a video, include a YouTube ID in the copy doc

 

Explore main components