Components are the foundational building blocks of our design system. Each component is designed to provide a consistent, modular, and scalable solution for common UI patterns, enabling developers and designers to create cohesive and accessible user experiences. By standardizing key elements like typography, layout, and interactivity, components ensure visual and functional consistency across the entire ecosystem. Whether it’s a simple button or a complex media and text layout, each component is built to be flexible, reusable, and easily customizable to meet diverse design needs.
A collapsible content area that allows users to expand and reveal hidden information, helping to organize and manage large amounts of content in a compact space.
The Breadcrumbs component provides a trail of navigational links that helps users track their location within a website’s hierarchy.
Buttons invite and trigger key actions throughout the experience.
The card component is a versatile component designed to showcase content with an image, date, title, excerpt, and category tags.
The Embed component supports embedding videos from YouTube and Vimeo, providing a consistent and responsive way to display external media content within the design system.
The form input system in this design system provides a structured, consistent way to handle user inputs across a variety of field types.
The Global Site Header provides a unified navigation bar across the entire site, enhancing accessibility and user experience.
The group block is designed to organize and structure content effectively.
The Hero component provides a visually impactful section to introduce key content on a page.
The Icons component leverages SVG sprites to manage and display both monotone and duotone icons efficiently.
Jump links are a set of in-page navigational links that allow users to quickly scroll to specific headings or sections within a page, improving access to key content.
A structured collection of related items, presented in a sequence with or without specific ordering, to organize content for easy readability.
A structured collection of related items, presented in a sequence with or without specific ordering, to organize content for easy readability.
The page header is designed to maintain consistency across pages, offering clear and structured content for users.
The Quick Links component provides a simple and structured way to display navigational links alongside icons, allowing users to quickly access key sections of the site.
A stylized block of text used to highlight a specific statement or passage, typically attributed to a source, to emphasize important content.
A horizontal line that visually divides content sections, providing clear separation between different parts of a page.
The table component is designed to handle tabular data in a flexible, responsive way. It supports various layout options, such as fixed column widths and striped rows, and is enhanced for mobile devices with automatic scrolling functionality.
If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.