Component list

See the list of components that CivicTheme supports right now. This list will grow as the community and adoption grows!

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.

---

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

• List

• 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.