Component Library Index

This page lists the available Pitt Online components and patterns and links to dedicated demo pages for each.

• Header & main navigation – top site shell and primary nav.
• Footer – global footer: Pitt Online lockup, stacked “Ask your question” form (all breakpoints), tablet 3×2 grid, desktop 4×2 grid (Academics, Learn more, and Contact span two rows), gold band with address · phone · privacy and social links.

• Buttons – primary, secondary, and tertiary variants.
• Icons – UI icons, block decorators, and social icons; usage of the masked-icon mixin and changing colors.
• Breadcrumb – page-level navigation trail.
• Content lists – bullet list styles used in content areas.

• Home templateready – home page shell with global header/footer and the new Figma-based home-hero as the first block after nav.
• Program page templateready – full page flow with global header and global footer; includes additional-links-featured-bright-horizontal before the footer; loads screen.css; gold content-divider between person-feature-alumni and general-content-text-light.
• Graduate templateready – in-progress page shell: global header, subpage-1-condensed hero, program-cards-carousel, program-list-full (list-expand.js), rfi, additional-links-featured-bright-horizontal, and global footer; loads screen.css only (more sections / polish to come).
• Academics templateready – page shell with global header/footer and a Figma-based subpage-1 hero as the first content block after nav (breadcrumb, serif heading, divider, image, and supporting list content).
• About templateready – About page flow with global header and footer: condensed hero, video feature, general content light, top rankings, person-feature alumni, general content dark.
• Hybrid program templateready – new page shell with global header and a condensed hybrid-program hero variant.
• Admissions templateready – complete admissions page flow with global header and footer, condensed hero, AI agent block, timeline content, FAQ with tab/select sync and accordion behavior, and the additional-links-dark-vertical section.
• Careers detail templateready – complete careers page flow with global header/footer: subpage-1-condensed careers hero, general-content-text-light, program-cards-carousel--light, single-column content-text-with-list variant, single-slide flex-marketing-block, person-feature-alumni, and rfi.
• Careers landing templateready – careers landing flow with global header/footer, subpage-1-condensed hero, section divider, and career-path focused additional-links-callout-narrow cards.
• Blog detail templateready – first-section implementation under global header with breadcrumb trail, News kicker, blog title/meta, featured image with gold frame, and bottom-left decorative node strip.
• Blog index templateready – Launch Pad archive shell: global header and footer, breadcrumb (Home → Launch Pad), serif page title and dek, top-right gold node strip, stacked featured post card, dark-blue blog articles grid, blog article carousel, and stacked blog article list.
• Contact templateready – global header/footer shell with the new Figma-based subpage-2 contact hero: on-dark breadcrumb, blue lead section, and a Get Started card with 3 selects.
• 404 templateready – error-page flow with global header/footer, a new subpage-1-simple hero, and a sparkle-led assistance search input section.
• Generic text templateready – utility page shell for legal and general copy pages with global header/footer, a narrow title/subtitle intro, and long-form wysiwyg-content body content.

• [✓] LINKS: NARROW Additional links callout narrow (Additional_Links-Callout_Narrow) – mobile: stacked gold cards; tablet: 613px headline, 456px cards wrapping; desktop: 816px headline, 104px page margins, equal-width columns (up to four per row), 24px card padding, 32px chevrons.
• [✓] CONTACT LINKS: GLOBAL Additional links callout wide (Additional_Links-Callout_Wide) – two contact-focused gold callout cards with phone/email icon rows, dashed dividers, and CTA links with chevrons.
• [✓] LINKS: FEATURED Additional links featured – light featured-links block with centered serif headline and intro copy followed by four stacked gold CTA rows with right chevrons.
• [✓] LINKS: FEATURED Additional links featured bright horizontal – royal band with heading and intro copy, then bold blue link buttons with chevrons; small screens stack the links, larger screens arrange them in a row or beside the copy.
• [✓] LINKS: FEATURED Additional links featured light vertical – light grid-backed featured-links block with a target-icon divider, supporting copy, and a 2x2 set of gold CTA links.
• [✓] LINKS: FEATURED Additional links dark vertical – light grid-backed featured-links block with a target-icon divider, supporting copy, and a 2x2 set of gold CTA links.
• [✓] AI AGENT: GLOBAL AI agent content – mobile admissions assistant section with sparkles icon, sample prompt chips, and shared ask-input treatment.
• [✓] APPLICATION DEADLINES + PROGRAMS Application and class deadlines – calendar-style opener, heading and supporting copy, then deadline cards pairing labels with dates or terms.
• [✓] BLOG ARTICLES Blog article carousel – light section with centered serif heading and body copy, blue nav controls, and a mobile one-up blog card carousel using shared carousel behavior.
• [✓] BLOG ARTICLES Blog article list – light section with centered serif intro and stacked bordered blog list cards with title-row arrow and meta chips (category, date posted, and reading time).
• [✓] BLOG ARTICLES Blog articles grid – dark medium-blue blog cards section with centered serif intro and gold divider; first card includes a featured image, followed by stacked title/meta cards with gold framing and white arrow accents.
• [✓] BLOG INDEX HERO Blog index header – archive hero: breadcrumb, left-aligned Instrument Serif title and light dek, horizontal gold node strip (top-right), and featured blog card with royal-tinted 3:2 image, gold frame, caption-style meta, and medium-blue title.
• [✓] BLOG ARTICLE HERO Blog Detail header - Header for all blog posts.
• [✓] CONTENT WITH LIST + PROGRAMS Content text with list – medium blue band with gold title, short description, and repeating metric rows (label plus value) aligned side-by-side.
• [✓] CONTENT WITH LIST + PROGRAMS Content text with list vertical – medium blue band with gold title, short description, and repeating metric rows (label plus value) Aligned vertically.
• [✓] FAQS FAQ – intro copy and content-divider, yellow topic select, and a multi-open question/answer accordion using semantic dl / dt / dd markup.
• [✓] BLOG ARTICLES Featured articles – centered serif intro with gold target divider, followed by stacked article cards with title-row arrow and metadata chips (category, date published, and reading time).
• [✓] FLEX MARKETING BLOCK + PROGRAMS Flex marketing content block – flexible marketing tiles in a responsive grid with slider controls (arrows and dots), each pairing imagery with a royal text panel. Uses slider.js via scripts.js.
• [✓] TUITION COST + PROGRAMSGeneral content – tuition & costs – royal band with headline, supporting copy, a fees link, and two prominent tuition figures (full-time and part-time).
• [✓] GENERAL CONTENT DARK + PROGRAMS General content text dark – deep royal panel with title, body copy, and an optional call-to-action link.
• [✓] GENERAL CONTENT LIGHT + PROGRAMS General content text light – light section combining a photo gallery with a readable text band; layout stacks on small screens and opens into a wider multi-column gallery on large screens, with subtle decorative graphics.
• [✓] GENERAL COPY Generic text content – reusable legal/general copy block that pairs a simple page intro hero with rich-text wysiwyg-content body structure for policy and informational pages.
• [✓] HOMEPAGE HERO Homepage hero – Homepage hero
• [✓] ALUMNI + PROGRAMS Person feature alumni – alumni stories in a slider: quote, portrait, and simple navigation; on large screens the story splits into copy beside the image. Uses slider.js via scripts.js.
• [✓] FACULTY + PROGRAMS Person feature faculty – faculty profiles in a carousel: framed photo, name, and role; one profile at a time on small screens, a horizontal strip on larger screens. Uses carousel.js via scripts.js.
• [✓] PROGRAM FEATURE Program cards carousel – program cards over a photo and soft gradient, similar in mood to the request-for-information block; arrow navigation, one card visible on small screens and several aligned on larger screens with even card heights. Uses carousel.js via scripts.js.
• [✓] PROGRAM FEATURE Program cards carousel light – light variant of the cards carousel with royal typography and controls, white card surfaces, and the same carousel behavior. Uses carousel.js via scripts.js.
• [✓] PROGRAMS Program Hero – full-width hero with background imagery, a foreground callout card, and a gold highlight strip.
• [✓] PROGRAM FEATURE Program list full – section intro and a scrollable list of program rows, with a control to show or hide the rest of the list; optional modifier program-list-full--mobile-details shows the detail row on small screens with detail-stack / detail-label / detail-value. Detail icons include landmark, degree, money, and alarm. Uses list-expand.js via scripts.js.
• [✓] RIF FORM: GLOBAL Request for information – Pitt Royal backdrop with a gold-bordered card and a short interest form (dropdowns and a continue action).
• [✓] SECONDARY LIST + PROGRAMS Secondary callout – white callout panel with four checklist-style highlights (for example eligibility, experience, pathways, accreditation) and gold accents.
• [✓] HERO Subpage hero 1 – introductory subpage hero: lead image, headline and copy, and a checklist-style patterned band.
• [✓] HERO Subpage hero 1 condensed – compact subpage hero with breadcrumb, image paired with headline and copy, and a side accent strip.
• [✓] HERO Subpage hero 1 simple – simplified subpage hero with breadcrumb, centered error heading/body copy, and top-right decorative node strip treatment.
• [✓] HERO Subpage hero 2 – dark-blue hero with on-dark breadcrumb, centered lead copy, and a gold-bordered Get Started card with 3 RFI-style selects.
• [✓] VIDEO WITH TEXT Text and asset video feature – dark media feature with gold display headline, supporting copy on tablet/desktop, and click-to-load Vimeo player in a persistent 3px gold frame. Uses video-embed.js (js-video-embed).
• [✓] VIDEO WITH TEXT Text and asset video feature light – light variant with flipped layout (video left, text right), Pitt Royal copy, and click-to-load Vimeo player in a persistent 3px gold frame. Uses video-embed.js (js-video-embed).
• [✓] TEXT CENTERED Text centered feature light – light centered text block with top/bottom `block-5.svg` decorative marks and an inner content wrapper.
• [✓] TIMELINE Timeline content – royal timeline block with top/bottom block-5 decorative marks, headline + subtitle, and four timeline steps.
• [✓] RANKINGS Top ranking content – mobile stack; tablet/desktop use gold content-divider rhythm (see secondary-callout), alternating rows, and type scale
• [✓] UPCOMING DEADLINES Upcoming Deadlines – A list of upcoming deadlines.
• [✓] BLOG CONTENT WYSIWYG content – rich text content area for long-form blog body copy, including heading hierarchy, lists, tables, block quotes, and inline links.

Foundations (color, typography, spacing) are defined in Sass primitives and will be surfaced on dedicated reference pages in a future iteration.