Patterns

Patterns are documented recipes for solving common UX problems using the design system’s components. While components are the individual building blocks, patterns show how to combine them to build real interfaces — with code examples, decision guides, and best practices.

Available Patterns

Forms

Build declarative, JSON-driven forms with eds-form. Covers field types, validation, error handling, grouped sections, conditional fields, file uploads, ratings, and NPS surveys.

Key components: eds-form, eds-input-field, eds-input-dropzone, eds-rating, eds-nps

Notifications

Choose the right notification for the situation — inline alerts for persistent messages, toasts for transient confirmations, modals for blocking decisions. Includes intent mapping, layout options, and accessibility.

Key components: eds-alert, eds-toast, eds-toast-manager, eds-modal

Page Layouts

How to structure common page types — hero sections, content pages, and dashboards — using the grid system, container utilities, and layout components.

Key components: eds-header, eds-sidebar, eds-footer, eds-card-*, utility classes

Navigation

Combine header, sidebar, breadcrumbs, and tabs to build consistent navigation across applications. Covers responsive behavior, active states, and mobile patterns.

Key components: eds-header, eds-sidebar, eds-breadcrumb, eds-tabs, eds-link

Empty & Loading States

What to show when content is loading, data is empty, or something went wrong. Patterns for spinners, skeleton layouts, empty messages, and error recovery.

Key components: eds-spinner, eds-alert, eds-button, eds-img