Skip to content
Women's Healthcare Associates

Component Library

A visual reference guide of all available UI components and design tokens used throughout the WHA theme.

Color Palette

Brand and UI colors defined in theme.json and available via Tailwind CSS classes.

Brand Colors

Primary

#e21d5e

Main brand, buttons, links

Secondary

#942e5a

Secondary actions, accents

Tertiary

#daf0f4

Backgrounds, panels

Accent

#DCD22C

Highlights, alerts

Neutral Colors

Dark

#282f3e

Text, dark backgrounds

Light

#ffffff

Backgrounds, cards

Typography

Font family: Gentona. Comprehensive typography scales for headings, body text, and structured content.

Heading Scales

Props

  • content - Heading text
  • level - Heading level (0 for auto-managed) (0-6)
  • attributes - Additional HTML attributes (class, id, etc.)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph Styles

Large paragraph text for standard content. This is the default body copy used throughout the site.

Classes: text-base font-normal

Regular paragraph text for emphasized content. Use for highlighted sections and introductory text.

Classes: text-lg font-medium

Small paragraph text for secondary information and metadata. Used for captions and supporting details.

Classes: text-sm text-gray-600

Extra small label text for tags and small labels

Classes: text-xs uppercase tracking-wide

List Styles

Unordered List

  • First list item with standard styling
  • Second list item with consistent spacing
  • Third list item demonstrates the pattern
  • Nested structure available for hierarchical content

Ordered List

  1. First step in a numbered sequence
  2. Second step with automatic numbering
  3. Third step maintaining consistent formatting
  4. Fourth step with proper spacing between items

Prose Content

Apply the prose class for rich text content like article bodies and rich editors:

Rich Text Heading

This is a paragraph within prose-styled content. The prose class applies optimal typography settings for long-form reading. It handles margins, line heights, and spacing automatically.

Paragraphs have appropriate spacing and line heights for readability. Lists and other elements are automatically styled consistently.

  • Prose automatically styles lists
  • Blockquotes get special treatment
  • Links have appropriate styling
  • Code blocks are formatted nicely

Strong emphasis and italic text are styled appropriately. Bold text stands out clearly while maintaining readability.

Text Utilities

Bold / font-bold

Class: font-bold - For strong emphasis

Semibold / font-semibold

Class: font-semibold - For medium emphasis

Medium / font-medium

Class: font-medium - For light emphasis

Italic text for emphasis or citations

Class: italic - Use sparingly for special emphasis

Underlined text for special cases

Class: underline - Use carefully, often better to use color

Strikethrough text for deletions

Class: line-through - Rarely used in our designs

UPPERCASE WITH LETTER SPACING

Classes: uppercase tracking-wide - For labels and special headings

Text using primary color

Text using secondary color

Muted gray text for secondary information

Classes: text-[color] - Color utilities for semantic meaning

Text Alignment & Layout

Text aligned to the left (default)

Class: text-left

Text aligned to the center

Class: text-center

Text aligned to the right

Class: text-right

This is a very long line of text that will be truncated with an ellipsis when it exceeds the container width

Class: truncate - Truncates text with ellipsis

Buttons

Button component (ui/btn) with various types, themes, and sizes.

Props

  • label - Button text label
  • href - Link URL (optional, button tag used if omitted)
  • type - Button type/style (button | inline | outline | tab | list-item)
  • theme - Color theme (primary | secondary | tertiary | muted | light | dark)
  • size - Button size (sm | md | lg | xl)
  • icon - Icon name to display
  • with_arrow - Show arrow icon (true | false)
  • width - Button width (auto | full)

Type Variations

Use the type prop to change button style:

Button (default) → Inline Link → Outline →

Theme Variations

Use the theme prop to apply color variations:

Primary → Secondary → Dark → Muted →
Light (on dark) →

Size Variations

Use the size prop to adjust button dimensions:

Small → Medium (default) → Large → XL →

With Icons

Use the icon and with_arrow props to add icons:

Schedule → Find Location → No Arrow

Width Variations

Use the width prop to control button width:

Auto Width (default) → Full Width Button →

Icons

SVG icons loaded via the ui/icon component. Located in assets/icons/

Icon Component ui/icon

Props

  • name - Icon name/file to load
  • size - Icon size (xs | sm | md | lg | xl | 2xl | 3xl)
  • color - Icon color (primary | secondary | tertiary | muted | light | dark)
  • attributes - Additional HTML attributes

Available Icons

obstetrics

gynecology

mammography

behavioral-health

fertility

contraception

midwifery

menopause

prenatal-care

high-risk-ob

urogynecology

ultrasound

telehealth

wellness

genetic-screening

office-surgery

abnormal-bleeding

leakage

vulvar-health

schedule

locations

providers

services

search

call

forms

insurance

pay

myhealth

arrow-right

Size Variations

Use the size prop to control icon dimensions:

xs

sm

md

lg

xl

2xl

3xl

Color Variations

Use the color prop to apply color themes:

primary

secondary

dark

muted

Cards

Card components for displaying content in contained blocks.

Standard Card ui/card

Props

  • title - Card title
  • excerpt - Card description text
  • cta - Call-to-action button label
  • icon - Icon name
  • image - Image URL
  • href - Link URL
  • use_fallback_image - Use fallback image (true | false)

With Image

Obstetrics

Obstetrics

Complete prenatal care, labor and delivery services.
Learn More →
Gynecology

Gynecology

Comprehensive gynecological care for all ages.
Learn More →
Women's Health

Women's Health

Preventative health screenings and wellness.
Learn More →

With Icon

Obstetrics

Complete prenatal care, labor and delivery services.
Learn More →

Gynecology

Comprehensive gynecological care for all ages.
Learn More →

Schedule

Book an appointment today.
Schedule →

Minimal Card ui/card.minimal

Props

  • title - Card title
  • excerpt - Card description text
  • icon - Icon name
  • href - Link URL
  • attributes - Additional HTML attributes

With Icon

Schedule Appointment

Book your visit online

Find a Location

Visit us at a convenient location

Meet Our Team

Our experienced providers

Service Card ui/card.service

Props

  • title - Card title
  • excerpt - Card description text
  • cta - Call-to-action button label
  • icon - Icon name
  • href - Link URL
  • card_style - Card style (icon | simple | thumbnail)
  • use_description - Use description (true | false)

Icon Style

Obstetrics

Complete prenatal care, labor and delivery services.

Learn More →

Gynecology

Comprehensive gynecological care for all ages.

Learn More →

Schedule Care

Book an appointment with one of our providers.

Learn More →

Section Headers

Reusable section header component for consistent page structure.

Props

  • prehead - Small text above title
  • title - Main heading
  • subhead - Subtitle text
  • body - Body description text
  • alignment - Alignment (left | center)
  • spacing - Spacing (none | small | medium | large)

Alignment: left

Our Services

Comprehensive Women’s Healthcare

Expert care at every stage of life

From adolescence through menopause, our team provides personalized care tailored to your unique needs.

Alignment: center

Why Choose Us

Patient-Centered Care

We put your health and comfort first with compassionate, evidence-based medicine.

Tabs

Tab components for organizing content into switchable panels.

Horizontal Tabs ui/tabs.horizontal

Props

  • tabs - Array of tab objects with label, title, and content
  • section_header - Section header configuration (optional)
  • tab_alignment - Tab alignment (left | center | right)

Obstetric Care

Comprehensive prenatal care, labor and delivery services, and postpartum support for expectant mothers and families.

Gynecological Services

Expert gynecological care including annual exams, screenings, and treatment for a wide range of women's health conditions.

Wellness Programs

Preventive care and wellness programs designed to help you maintain optimal health throughout every stage of life.

Vertical Tabs ui/tabs.vertical

Props

  • tabs - Array of tab objects with label, title, and content
  • section_header - Section header configuration (optional)

Obstetric Care

Comprehensive prenatal care, labor and delivery services, and postpartum support for expectant mothers and families.

Gynecological Services

Expert gynecological care including annual exams, screenings, and treatment for a wide range of women's health conditions.

Wellness Programs

Preventive care and wellness programs designed to help you maintain optimal health throughout every stage of life.

Accordions

Expandable content sections for FAQs and organized information.

Accordion ui/accordion

Props

  • items - Array of accordion items with label and content
  • title - Accordion title (optional)
  • body - Accordion description text (optional)
  • first_open - Open first item by default (true | false)
  • show_icons - Show expand/collapse icons (true | false)
  • border_style - Border style variant

We accept most major insurance plans including Blue Cross Blue Shield, Aetna, Cigna, United Healthcare, and many others. Please contact our office to verify your specific coverage.

You can schedule an appointment by calling our office, using our online patient portal, or by clicking the "Schedule" button on our website. New patients are always welcome.

Yes! We offer telehealth visits for many types of appointments. This is a convenient option for follow-ups, consultations, and certain types of care that don't require an in-person visit.

Please bring a valid photo ID, your insurance card, a list of current medications, and any relevant medical records. Arriving 15 minutes early will help ensure a smooth check-in process.

Form Elements

Standard form inputs styled for the WHA theme.

Page Sections

(Not functional in this demo)

Full-width section components available for page building via ACF Flexible Content.

Hero

sections/hero

Large banner section with customizable layouts, background images, quick links sidebar, and multiple content alignment options.

Fields

title – Main hero title
body – Hero body content
cta_group – Call to action buttons
background_image – Background image (url, alt)
size – small | medium | large | auto
alignment – left | center | right
use_h1 – Use H1 tag for title (boolean)
enable_quick_links – Enable quick links sidebar
quick_links – Array of quick link items

Uses Components

ui/cta.group ui/btn.group

Copy

sections/copy

Flexible content section with 1-3 columns of copy and CTAs. Grid layout auto-determined by column count.

Fields

section_header – Section header config
columns – Array of columns (content, alignment, ctas)

Uses Components

ui/section.header ui/cta.group

Copy + Media

sections/copy-with-media

Content section with text and media side-by-side or stacked. Supports images and videos.

Fields

section_header – Section header config
cta_group – Call to action buttons
image – Image (url, alt)
media_type – image | video
layout – left | right | center

Uses Components

ui/section.header ui/cta.group

Cards Grid

sections/cards

Flexible grid/carousel of cards querying any post type with taxonomy filters, or manual post selection. Auto-maps card templates by post type.

Fields

section_header – Section header config
source_mode – manual | query
manual_posts – Relationship field for manual selection
post_type – post | wha_news | wha_services | wha_providers | wha_locations
posts_per_page – Number of posts (int)
filters – Taxonomy filters by post type
card_component – auto | ui/card | ui/card.service | ui/card.provider | etc.
card_style – icon | simple | thumbnail
display_mode – grid | carousel
layout – columns, gap, class options
see_all_button – See all button config

Uses Components

ui/section.header ui/card ui/card.service ui/card.provider ui/card.location ui/card.minimal ui/btn

Services Overview

sections/services-overview

Wrapper that delegates to services-carousel. Named for ACF layout compatibility.

Fields

(Same as Services Carousel)

Uses Components

sections/services-carousel

Services Carousel

sections/services-carousel

Horizontal scrollable carousel of service cards with navigation controls.

Fields

section_header – Section header config
services – Array of service post objects
card_style – icon | simple | thumbnail
use_description – Show service description (boolean)
see_all_button – See all button config (enabled, label, theme, url)

Uses Components

ui/section.header ui/card.service ui/btn

Find a Provider

sections/find-a-provider

Provider search interface with filters for name, language, specialty, role, and location. Includes results list and interactive map.

Fields

section_header – Section header config
fields – Custom field configurations

Uses Components

ui/section.header skeleton/card.provider

Find a Location

sections/find-a-location

Location search interface with filters for name and location type. Includes results list and interactive map.

Fields

section_header – Section header config
fields – Custom field configurations

Uses Components

ui/section.header

Related Providers

sections/related-providers

Grid of provider cards filtered by specialties, roles, locations, or tags. Supports pre-populated or dynamic queries.

Fields

section_header – Section header config
specialties – Array of specialty term IDs
roles – Array of role term IDs
locations – Array of location term IDs
tags – Array of tag term IDs
limit – Number of providers (-1 for all)
sort_order – Sort field (menu_order, title, etc.)
providers – Pre-populated provider IDs/objects

Uses Components

ui/section.header card.provider

Recent Articles

sections/recent-posts

Tab-based recent articles supporting Articles and News with individual taxonomy filtering per tab.

Fields

section_header – Section header config
tabs_configuration – Tab configs (articles_tab, news_tab) with enabled, label, posts_per_page, include_sticky, and filters

Uses Components

ui/section.header card

Articles Grid

sections/posts

Articles/news index with pagination, archive context, and dynamic category filter buttons.

Fields

section_header – Section header config
post_type – post | wha_news
per_page – Posts per page (int)
exclude_categories_posts – Category IDs to exclude
filter_categories_posts – Category IDs for filter buttons
orderby – date | modified | title
order – ASC | DESC
show_filters – Show filter buttons (boolean)

Uses Components

ui/section.header ui/posts.filters card

Tabbed Content

sections/tabbed-content

Responsive wrapper that auto-selects horizontal tabs, vertical tabs, or accordion based on layout type and screen size.

Fields

type – horizontal | vertical | grid
section_header – Section header config
tabs – Array of {label, title, content}

Uses Components

accordion tabs.horizontal tabs.vertical tabs.grid

Topics

sections/topics

Selected topics in a two-column vertical tabs layout with AJAX content loading.

Fields

section_header – Section header config
topics – Array of topic post objects
see_all_button – See all button config
heading_level – Heading level (0-6)

Uses Components

ui/section.header ui/topic.content ui/topic.skeleton ui/btn

Insurance

sections/insurance

Searchable grid of accepted insurance providers with client-side filtering.

Fields

section_header – Section header config
categories – Insurance category filter
data – Pre-populated insurance data (auto-populated if empty)

Uses Components

ui/section.header card.muted

Life Stages

sections/life-stages-overview

Grid of life stages with optional images, excerpts, and CTAs linking to individual pages.

Fields

section_header – Section header config
life_stages – Array of life stage post objects
display_options – show_images, show_excerpts, show_ctas (booleans)
see_all_button – See all button config (enabled, label, theme, url)

Uses Components

ui/section.header card.life-stage ui/btn

Provider Ratings

sections/provider-ratings

Provider ratings with aggregate stars and tabbed content showing ratings questions and comments.

Fields

provider_id – Provider ID (defaults to current post)
section_header – Section header config
stars_size – md | lg

Uses Components

ui/section.header ui/stars tabs.horizontal ui/provider.ratings.questions ui/provider.ratings.comments

MyHealth Login

sections/myhealth-login

MyHealth portal login section with embedded login form and optional CTAs.

Fields

section_header – Section header config
cta_group – Call to action buttons

Uses Components

ui/section.header ui/cta.group

Resources

sections/resources

Grid of resources filtered by category with links to individual resource pages.

Fields

section_header – Section header config
categories – Resource category term IDs
data – Pre-populated resource data

Uses Components

ui/section.header card.minimal

Instagram Feed

sections/instagram-feed

Social media section with social icons (auto-detected from URLs) and horizontally scrollable Instagram feed.

Fields

section_header – Section header config
socials – Array of social URLs or {label, href} items
enable_instagram – Enable feed (boolean)
posts_to_show – Number of posts (int)

Uses Components

ui/section.header ui/socials

Search providers, services, locations…

Schedule an Appointment

If you’re pregnant and want to begin care at WHA–or need to schedule an appointment during your pregnancy, call us! Find a provider and location here.

Please have your insurance information handy before you begin scheduling.

This will allow our teams to check whether your plan may require a referral for the care you need or to prepare benefits information to share with you at your visit. If you do not enter insurance information when scheduling, you may be asked to pay a $200-$500 deposit before receiving service.

What type of appointment do you need?