Components
Components are reusable user interface (UI) elements that provide consistent, accessible solutions to common website needs. InsureKidsNow.gov components follow the United States Web Design System (USWDS) standards to ensure our website is accessible, reliable, and easy to use for all visitors.
Each component includes design guidelines, usage recommendations, and examples to help content editors and developers implement them correctly and consistently across the website.
Why components matter:
Consistency - Using standard components creates a predictable, familiar experience for users
Accessibility - All components are designed to meet WCAG accessibility standards
Efficiency - Pre-built components save time and ensure quality
Maintainability - Standardized components are easier to update and improve
What's included?
Accordion
An accordion is a list of headers that can be clicked to show or hide additional content beneath them. Accordions help organize content and allow users to focus on one section at a time without overwhelming them with too much information at once.
Back to Top
A Back to Top link or button allows users to quickly return to the top of a long page without having to scroll manually. This is especially helpful on pages with lengthy content or multiple sections.
Banner
A banner identifies InsureKidsNow.gov as an official website of the United States government. It appears at the very top of every page and helps visitors understand that the website is official and secure.
Breadcrumb
Breadcrumbs provide secondary navigation that shows users where they are within the website's structure. They display the path from the homepage to the current page, making it easy for users to navigate back to parent pages.
Button
A button draws attention to important actions with a clear, clickable element. Buttons are used for actions like submitting forms, starting processes, or navigating to important pages.
Checkbox
Checkboxes allow users to select one or more options from a list. Unlike radio buttons, checkboxes let users choose multiple items at the same time.
Datepicker
A date picker helps users select a specific date from a calendar interface. It ensures dates are entered in the correct format and makes it easier for users to choose dates without typing.
Pagination
Pagination breaks up long lists or large amounts of content into separate pages. It includes navigation controls (like page numbers and "Next"/"Previous" buttons) that allow users to move between pages.
Select (Drop-down)
A dropdown (also called a select element) allows users to choose one option from a list. The list appears when users click on the dropdown, and only one option can be selected at a time.