Components

Components are interactive and non-interactive UI elements that can be grouped together or presented individually. They are independent, reusable chunks of a user interface.

What is the difference between components, templates, and patterns?

Components

Components are design elements that define a visual style and/or micro-interaction. A component is the smallest unit of measure within a design system. They can be considered concrete, a finite list: Button, accordion, table, etc.

Templates or Page layouts

Templates, or page layouts, compose components within a single page. A layout can contain multiple variations of a component depending on the context.

Patterns

Patterns incorporate one or more page layouts and components to create an interaction that can span multiple pages, a short or long time span, and potentially even multiple channels. Patterns might be unique to a site or an application and may evolve with changes in technology or after competitive analysis.

A pattern is more than the sum of its parts. Patterns are solutions. In the dol.wa.gov Design System, patterns demonstrate how design, content strategy, reusable components, and accessibility can be put together to solve common problems that all Washingtonians may experience on our website.

Create or update a component

If you have a new component, or an update to an existing component, consider contributing back to the design system. Reach out to the Web Services Team if you have questions.

List of components

  • Accordion
  • Alert
  • Before you get started box
  • Button
  • Card
  • Columns
  • Help Topic
  • Horizontal line
  • List
  • Need help?
  • Related information
  • Summary
  • Table
Was this information helpful?