Skip to content

Components

Alfred J Lin edited this page Mar 12, 2026 · 2 revisions

Overview

Components are the individual UI elements used to build pages in the UMD Libraries Design System. They are implemented as Drupal Single Directory Components (SDCs) and are available in the Layout Builder.

Component Groups

Text & Content

  • Heading — Section titles and page headings (H1–H4)
  • Text — Body text via WYSIWYG
  • Image — Embedded images with aspect ratio control
  • Text Callout — Highlighted short-form text
  • Quote — Featured or simple pull quotes

Actions & Links

Display

  • Card — Standard, Overlay, or Icon card
  • List — Vertical content listing with image and date
  • Event — Single event display with date, time, and location
  • Person — Staff or faculty profile in Bio, List, or Card format
  • Section Intro — Section heading with optional "see all" link

Full-Width & Hero

  • Hero — Minimal or Overlay page hero

Alerts & Notifications

  • Alert — In-page or site-wide alert message

Interactive

  • Accordion — Collapsible content sections
  • Tab — Tabbed content panels
  • Table — Structured data table

Media

  • iFrame — Embedded external content

Navigation

  • Navigation — Primary site navigation with main, utility, and search slots
  • Side Navigation — Sidebar menu for section navigation
  • Breadcrumb — Auto-generated navigation trail

Site-Wide

Clone this wiki locally