UI Components

A streamlined library of ready-to-use UI components designed to help teams build websites and digital services faster.

Introduction

UI Components Overview

Every component is consistent, accessible, and technically optimized—reducing development time and eliminating repetitive work. With clear guidelines and dependable behavior across all platforms, these components empower designers and developers to deliver high-quality government experiences with greater speed and confidence.

Header

A top navigation bar containing the organization logo, primary links, and quick actions.

Breadcrumbs

A navigation element that shows the current page location within the site hierarchy.

Sticky Bar

A persistent bar that remains visible while scrolling, keeping key actions within reach.

Footer

A structured footer that provides essential links and information in a consistent layout.

Banners

Prominent messaging areas used for announcements, promotions, and important alerts.

Content Blocks

Structured text blocks that organize headings and body copy for comfortable reading.

Cards

Flexible containers that group related content and actions in a compact, scannable format.

Services

Card layouts for presenting government services with clear titles and quick entry points.

Filters

Controls that let users refine lists and search results by category or attribute.

FAQs

Expandable question-and-answer sections that surface helpful information on demand.

Media Carousel

A slideshow for cycling through images and media with intuitive navigation controls.

Gallery

A responsive grid for presenting collections of images and visual media.

Pagination

Navigation controls for splitting long lists of content into manageable pages.

Tables

Structured rows and columns for comparing and scanning detailed data sets.

Tabs

Switchable panels that organize related content within a single view.

Badges

Compact labels that highlight status, categories, or counts at a glance.

Stepper

A progress indicator that guides users through multi-step processes.

Statistics

Numeric highlight blocks that showcase key figures and achievements.