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?

  • Design system staging: Component proposals can live here before moving to the UI library.
  • Purpose: Meant for experimentation, validation, and quick sharing.
  • Safety: Try things fast, break nothing. Risk-free design.
  • Speed: Rapid prototyping, so you can get it done without a massive build process.
  • Flexibility: Flexible enough to customize further, pre-coded enough to reuse.

Colors

UI color palette for consistent, accessible design across components.

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.

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.