Component Library

This Component Library is a collection of reusable UI elements and design patterns built on the principles of atomic design.  It's built to create a scalable interface that enhances efficiency, consistency, and maintainability in design and development that includes essential building blocks such as buttons, forms, and navigation bars.  Our components are also crafted to meet WCAG 2.1 AA standards and 508-compliance, ensuring accessibility for all users. By using pre-built, standardized components, teams can accelerate development, reduce repetitive work, and deliver cohesive, user-friendly digital experiences. Explore some of our most popular components to learn more about their usage and best practices.

The Layout Section

The layout section is a container that enables you to group components and structure them together on a page. We recommend using a layout section before adding any components from our library. This approach provides the flexibility to create component groups, organize two sets of components side-by-side, or apply background colors, ensuring a cohesive and visually engaging layout. By leveraging layout sections, you maintain consistency while enhancing the creative possibilities of your designs.

The Component Group

The component group is used only within a layout section.  As its name suggests, the component group allows authors to group components together - think of it as a container within a container.  While authors can organize different components side by side within a layout section, by using a component group within a layout section, authors can group sets of components side-by-side.  This is a more advanced use of our layout sections that we recommend working with the Web Services team to layout your pages and to better understand how to make edits where component groups are being used.