# 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).