Skip to main content
Hennepin County Design System

Components

What components are

Components are the reusable building blocks of a digital product. Each component meets specific needs for user interactions and effective user interfaces. Components are essential to an interactive user interface.

Components in this design system are:

  • Vetted for accessibility and county brand
  • Created to work alone or together in patterns
  • Designed to provide an intuitive and consistent user experience for residents

Examples of components

  • Button
  • Radio buttons
  • Checkboxes
  • Accordions
  • Date picker

How to use components

A component is defined by code. So it has little room for reinterpretation. But developers may need to customize the code to fit their technology stack.

Each component page helps front-end developers meet county standards and ensure compliance with Section 508.

On each components page you will find:

  • Component purpose
  • How the component works
  • Example code you can copy (HTML, CSS, and PrimeNG)
  • Best practices for when to use and not use the component

Reuse the components

The design system provides pre-built components to use across projects. This saves time and effort building new components from scratch.

Customize when necessary

Components in this design system aim to provide consistency and accessibility across sites. But you sometimes need to deviate from a standard to customize a component. In such cases, consult the design system for guidance. This will ensure your customizations still meet usability best practices.

Using Figma for design

Components in our design system have Figma counterparts.

Learn how to use Figma and our design system components. Visit the Figma tutorial.

Questions and support

If you have any questions or issues regarding the Design System Github repository or component code: