Skip to main content

Foundation Components

These are the core building blocks of the PDL design system. They are designed to be composable, accessible, and consistent with the PsyData Labs L.L.C. brand.

[!NOTE] Foundation components are styled using PDL's customized design tokens. For specific styling overrides, please consult the core design system guidelines rather than using inline styles.

Layout & Structure​

  • Card — The primary layout primitive. Use for grouping content, status displays, and structured sections.

Status & Indicators​

  • Badge — Compact status and category labels.
  • Alert — Urgent, time-sensitive messages.
  • Callout — Lighter notes, tips, and contextual information.
  • InfoBlock — Structured factual or reference content.

Navigation & Disclosure​

  • Accordion — Collapsible content sections.
  • Tabs — Tabbed interfaces with controlled state support.

Data Display​

  • Metric — Compact key performance indicators.
  • Statistic — Large, prominent numbers for dashboards.
  • Timeline — Vertical event and milestone lists.
  • Step — Numbered process or wizard steps.

Labels & Metadata​

  • Chip — Removable or interactive labels (filters, selections).
  • Tag — Lightweight static category labels.
  • Quote — Styled quotations with optional attribution.