# Component list ## CivicTheme component library CivicTheme is built using **atomic design principles**, offering a hierarchy of components ranging from foundational styles to complex, reusable patterns. Below, you'll find a complete breakdown of the components, categorised into **Base**, **Atoms**, **Molecules**, and **Organisms**. For a visual list of our components, please check out the [Figma file](https://www.civictheme.io/figma). *** ### **Base components** The foundation of CivicTheme includes variables and tokens that ensure consistency in design, enabling scalable, maintainable, and reusable components. * Colours * Background * Elevation * Fonts * Grid * Icon * Image * Item list * Layout * Spacing These base elements define the **core design framework**, supporting the styling and layout for all components within CivicTheme. *** ### **Atoms** Atoms are the simplest, most basic building blocks in CivicTheme. They represent single UI elements and are designed for **high reusability** across various contexts. * Back to top * Button * Chip * Content link * Form control * Checkbox * Field description * Field message * Fieldset * Label * Radio * Select * Textarea * Textfield * Heading * Link * Paragraph * Popover * Quote * Table * Tag * Text list * Toggle *** ### **Molecules** Molecules combine two or more atoms to form **functional UI elements**. These components are slightly more complex and include grouped elements with interactive behaviour. * Accordion * Attachment * Breadcrumb * Callout * Event card * Field * Figure * Group filter * Logo * Map * Navigation card * Next Step * Pagination * Price card * Promo card * Publication card * Search * Service card * Single filter * Snippet * Subject card * Table of contents * Tabs * Tag list * Tooltip * Video player *** ### **Organisms** Organisms are **highly structured, composite components** consisting of multiple atoms and molecules working together. These components define the most complex reusable patterns. * Alert * Banner * Campaign * Carousel * Footer * Header * **Li**st * Message * Mobile navigation * Navigation * Promo * Side navigation * Skip link * Slider * Social lnks *** ### **Why this hierarchy matters** The clear categorisation of components within CivicTheme supports: 1. **Reusability**: Ensures consistent implementation across various projects. 2. **Maintainability**: Simplifies updates and modifications with minimal disruption. 3. **Scalability**: Easily extendable for new use cases, frameworks, or jurisdictions. By adhering to atomic design principles, CivicTheme empowers designers and developers to create **accessible, compliant, and scalable** digital experiences for governments globally. For more details, explore the [Figma File](https://www.civictheme.io/figma). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.civictheme.io/components/component-list.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.