State of California Design System BETA
Custom Google Search

Components

Components are the structural elements of the Design System. They meet common user needs and can be reused across websites.

Our components are:

  • Based on W3C custom element standards to avoid the need for an underlying library
  • Created with performance and accessibility in mind
  • Usable in any framework

Structural components

These components form the header and footer of a Design System website.

Page feedback

Alpha

Widget that lets people provide feedback on page content

Site footer

Alpha

Customizable links and social media icons at the bottom of all pages

Site header

Alpha

The site name and logo with an optional search bar at the top of all pages

Statewide footer

Alpha

State of California standard footer

Statewide header

Alpha

State of California standard header

These components help people find and move through content.

Back to top button

Alpha

A button that lets people go back to the top of the page without scrolling

Link icon

Alpha

Icons that tell people if a link goes to another website or a PDF

Page navigation

Alpha

Links on the left side of a page that go directly to major sections of a page

Pagination

Alpha

Splits ordered lists into numbered pages shown one at a time

Site navigation

Alpha

Links and dropdown menus at the top of every page that let people move around the site

Skip to content

Alpha

Accessibility feature that lets people skip the header content

Visual components

These components provide default visual styles and icons for a Design System website.

Base CSS

Alpha

Base CSS

Icons

Alpha

Visual indicators for important actions and information

Content components

Use these components to present information and images.

Accordion

Alpha

An expandable section of content that lets people choose what they want to see

Feature card

Alpha

A highlight space on the homepage with text, image, and a button

Link grid

Alpha

Grid of call-to-action buttons for top user tasks and needs

Page alert

Alpha

A space for high-priority information that can include an icon and links

Regulatory outline

Alpha

A list that replicates the ordering of government code

Step list

Alpha

A numbered list that shows the steps in a process

Component maturity

Design System components are in different stages of maturity and labeled accordingly.

In research

A need has been identified for a new component. The need comes from either:

  • An external product
  • The Design System itself

Components in research are going through initial testing to determine:

  • If there is a broad need throughout the state’s digital ecosystem for the component
  • If the component will be a permanent part of the Design System

The component meets minimal or no accessibility requirements.

Alpha

An In research component has matured and is ready for wider adoption and use cases. The component is a candidate for permanent status as part of the Design System.

Alpha components must pass the following accessibility reviews every time a new version is published:

  • Tested with the axe accessibility tool and passes all automated WCAG AA level checks
  • Reviewed with the VoiceOver screen reader on desktop
  • Verified keyboard navigation and that all actionable elements of the component are reachable via keyboard commands only
  • Reviewed component layout on a variety of screen sizes

Beta

The component is widely used and has been refined through several research, design, and development iterations.

Beta components must pass the following accessibility reviews every time a new version is published:

  • Tested with the axe accessibility tool and passes all automated AA level checks
  • Reviewed with the VoiceOver screen reader on desktop
  • Reviewed with the TalkBack screen reader on mobile
  • Verified keyboard navigation and that all actionable elements of the component are reachable via keyboard commands only
  • Reviewed component layout on a variety of screen sizes
  • Reviewed component display using content in English, Spanish, Simplified Chinese, German, and Arabic (using right to left display (RTL))

Production

The component has been adopted at scale and meets the highest standard for accessibility and performance. Production components must pass all accessibility reviews every time a new version is published.

GitHub Twitter