Component design sandbox

Validate and test component designs in the browser before production

This sandbox lets UX team prototype, demo, validate, and test UI components. Each component file includes self-contained HTML, scoped CSS, and references. This is a first-step demo stage before bringing these UI components into the UI library.

Why use this sandbox?

  • Staging: Test components before production deployment to the UI library.
  • Iteration: Experiment and validate designs with live feedback.
  • Low risk: Prototype freely without affecting production systems.
  • Speed: Ship designs faster with minimal build overhead.
  • Reusable: Pre-coded components ready to extend or integrate.

Colors

UI color palette for consistent, accessible design across components.

Line tabs

Horizontal tab navigation for organizing content into sections.

Buttons

Reusable button styles for primary actions, secondary actions, and states.

Typography

Type scale and hierarchy for readable, consistent text across UI.

Forms

Accessible inputs, labels, and validation patterns for data entry.

Alert

Status messages for success, warning, error, and info to guide users.

Header

Top navigation and branding pattern for consistent app/site frames.

Chat toggle

Open/close control for chat support, improving help discoverability.

Light bold badges

Compact status tags to emphasize categories, counts, or states.

Compact select

Space-efficient select control for mobile, dense UIs and filter panels.

Dashboard frame

Structural shell to host dashboard widgets and layout regions.

Dashboard skeleton

Placeholder skeletons to improve perceived loading and structure.

Document navigator

Browse, search, and jump between document sections quickly.

Filter panel

Facet filters to refine results with clear selection feedback.

Framed dashboard

Pre-styled dashboard container for quick prototyping and reuse.

Grid (Dashy)

Responsive grid layout optimized for dashboard cards and widgets.

Injury selector (steps)

Step-by-step flow to narrow injuries with guided selections.

Injury selector

Direct selector for injury categories to speed up task completion.

Multi selector

Select multiple options with clear states for filtering and tagging.

Multi selector (stack)

Stacked multi-select layout optimized for vertical mobile screens.

Open chat

Inline chat launcher for real-time support and quick answers.

Service card

Service summary card highlighting key details and calls to action.

Sidebar (max)

Full-featured sidebar with navigation, filters, and auxiliary tools.

Side menu

Compact vertical navigation for sectioned content and tasks.

Layout masonry grid

CSS grid-based masonry for uneven card heights without JS.

Layout masonry flex

Flexbox masonry pattern for simple, responsive card flows.

Layout masonry columns

CSS column-based masonry for newspaper-style stacking.

Layout masonry js

JavaScript-enhanced masonry for precise control and reflow.

Facet filters

Multi-facet filtering controls for narrowing complex result sets.

Injury picker

Pick injury categories quickly with a compact, guided selection UI.

Mixed layout

Combined layout patterns for testing mixed content arrangements.

Tour

Guided product tour experience for onboarding and feature discovery.

Tour (variant B)

Alternate tour variant for side-by-side validation and iteration.