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—from alerts and banners to forms and navigation—designed to create seamless and user-friendly experiences.
Naming Convention & Categories
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 Index
Easily find and access all components in the Advocate Health Design System. Browse the full list below, organized by category, and click on any component to learn more.
A - Alerts
B - Banners
B2 HERO banner carousel
C - Content Components
C2 Accordion view more
C3 Headline CTA
C4 Multi-button layout CTA
C5 Multi-column CTA
C6 Promo carousel CTA
C7 Promo CTA
C8 Link list
C9 A-Z index
C10 Suggestive dropdown list
C11 Reverse row stories with visual
C12
C13 Side photo content card
C14 Side photo content with carousel
C15 Image asset
C16 Video asset
C17 Side media asset
C18 Audio asset
C19
C20 CTA content card
C21 Content feed for health news
C22
C23 Content feed for local site
C24 Location card
C25 Location info
C26 Rich text
C27 Rich text admin
C28
C29
C30 Icon CTA simplified
C31 Icon CTA bordered
C32 Icon CTA colored box
C33 Icon CTA left aligned
C35
C36
C37
C38
C39
C40 Simple sign-up
C41 Table
C42
C43 Media gallery
C44 Testimonial
C45
C46 Childrens animal motif
C47 Multi-column splitter
C48 Reputation schedule CTA
C49
C50 Top statistic
C51 Side statistic
C52 HERO statistic
C53
C54
C55 Biography directory
C56 Biography grid
C57
C58
C59
C60 News
C61 Blog
C62
C63
C64
C65
C66
I - Integrations
I02 Sparkle Event Search
I03 Sparkle Provider Profile
I04 Sparkle Location Overview
I06 Sparkle Appointment
I07 Sparkle Appointment Confirmation
I08 Sparkle Event Confirmation
F - Forms
N - Navigation
N2 Utility Navigation
N3 Left-Side Navigation
N4 Left-Side Navigation Anchor Link
N6 Main Footer
N7 Corporate Footer
N8 Tabs
S - Search
S2 Find a Location
S3 Filter by Type
S4 Search Results
S5 Embedded Search
S7 Service Search
S8 Blog Listing
S9 News Listing