Design System
Component Library Index
This page lists the available Pitt Online components and patterns and links to dedicated demo pages for each.
Layout & Shell
- Header & main navigation – top site shell and primary nav.
- Footer – global footer, navigation groups, and contact details.
Components
- Buttons – primary, secondary, and tertiary variants.
-
Icons – UI icons, block decorators,
and social icons; usage of the
masked-iconmixin and changing colors. - Breadcrumb – page-level navigation trail.
- Content lists – bullet list styles used in content areas.
Page Patterns/Content Blocks
- Program Hero – program hero with background image, callout card, and highlight strip.
- Subpage hero 1 – subpage introductory layout with image and checklist pattern.
- General content text dark – Pitt Royal panel with title, body copy, and optional CTA link.
- Secondary callout – white-background callout block with four items (Eligibility, On-Campus Experience, Licensure Pathways, Accreditation) and gold block decorators.
- Application and class deadlines – calendar icon, title, body copy, and deadline cards (label + value).
- Content text with list – medium blue block with gold heading, description, and metric rows (title + value).
- Person feature alumni – dark blue block with title, counter, prev/next chevrons, and featured person slide (heading, subheading, text, image).
- Request for information – campus-fade background with form card (heading, dropdowns for Subject / Program / Term, program message link, Continue button).
Foundations
Foundations (color, typography, spacing) are defined in Sass primitives and will be surfaced on dedicated reference pages in a future iteration.