Cookies on MHCLG Svelte Component Library

We use some essential cookies to make this service work.

We'd like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.

View cookies

Alpha This service is in development and intended to be production-ready and available for use by the digital community in Autumn 2025.

Patterns

Patterns are reusable solutions to common design problems. They show how to combine components and content to help users complete specific tasks.

Warning Patterns are currently in development. Check back soon for proven design solutions for government services.

What are patterns?

Patterns are best practice design solutions for specific user-focused tasks and page types. They combine components, content design principles, and interaction design to solve common problems in government services.

Unlike components, which are individual interface elements, patterns show how to use multiple components together to create complete user journeys and workflows.

Examples of patterns include:

  • Form validation - How to validate user input and show error messages effectively
  • Data entry workflows - Step-by-step processes for collecting complex information
  • Dashboard layouts - Organising data visualisations and key metrics for different user needs
  • Search and filtering - Helping users find and refine large datasets
  • Progressive disclosure - Revealing information gradually to avoid overwhelming users
  • Data export and sharing - Allowing users to download or share data in various formats

Patterns for data-rich services

The MHCLG Svelte Component Library will focus on patterns specifically designed for data-rich government services, including:

Data presentation patterns

  • Interactive charts and graphs
  • Data tables with sorting and filtering
  • Geographic data visualisation
  • Real-time data displays

User interaction patterns

  • Data exploration workflows
  • Comparison and analysis tools
  • Collaborative data annotation
  • Accessibility-first data interaction
Contributing patterns: If you have a proven design solution that could benefit other government teams, we'd love to hear from you. Get in touch with our community to discuss contributing patterns to the library.

Using patterns with components

Patterns will show you how to combine our Svelte components with content design and interaction principles to create effective user experiences.

Each pattern will include:

  • When to use - Specific scenarios where the pattern is most effective
  • How it works - Step-by-step guidance on implementing the pattern
  • Code examples - Working Svelte implementations you can copy and adapt
  • Accessibility considerations - How to ensure the pattern works for all users
  • Research insights - Evidence and user research supporting the pattern

Stay updated

We're actively developing patterns based on real user needs and research from across government. Follow our progress and get notified when new patterns are released: