> For the complete documentation index, see [llms.txt](https://salsa-digital.gitbook.io/govcms-content-administration/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salsa-digital.gitbook.io/govcms-content-administration/civictheme-components-optional/civictheme-components.md).

# CivicTheme components

Below is an overview of the current components available in CivicTheme. Examples of these can be found across the training environment website.

These components can be extended, modified or added to by developers.

The entire CivicTheme Design System is available in [Storybook](https://uikit.civictheme.io/?path=/story/about-civictheme--about-civic-theme), which provides graphic designers with additional information about the design system and its atomic design standards.

### Content

A standard rich text field for adding text and image content.

<figure><img src="/files/yXbCd9QB53rCMJoOdVuN" alt=""><figcaption></figcaption></figure>

### Accordion

The ability to add expandable and collapsible sections with basic text containers.

<figure><img src="/files/dDg42tjm6N8S96BEa7ZB" alt=""><figcaption></figcaption></figure>

### Attachment

A highlighted callout box containing a single document media asset.

<figure><img src="/files/jSFUnQbIwY6FNvV1jGK0" alt=""><figcaption></figcaption></figure>

### Automated list

Create an automatic list of any content on the website. In this example it's events.

<figure><img src="/files/jHEFHXVGVJXbLhjkFG7T" alt=""><figcaption></figcaption></figure>

### Callout

Provides a section with a unique look that can help break up text-heavy pages.

<figure><img src="/files/BwXXthoe8QEJiZnGqOCJ" alt=""><figcaption></figcaption></figure>

### Campaign

Campaign provides a two-column layout with an image, heading and date.

<figure><img src="/files/4nbLqunWOfYNRNP4zqzn" alt=""><figcaption></figcaption></figure>

### iFrame

Allows any iFrame content to be embedded.

### Manual list

Similar in function to the **Automated list**, however you can manually define which items should appear in it.

### Map

Allows the embedding of Google maps.

### Next step

Similar to **Callout**, often used to show a series of steps to be taken.

<figure><img src="/files/9W1qLidKxinqdkQufLKl" alt=""><figcaption></figcaption></figure>

### Promo

A larger-styled callout box with a link in a second column.

<figure><img src="/files/zcYTGvwk1O93mICHqPNA" alt=""><figcaption></figcaption></figure>

### Slider

Provides a slideshow (carousel) of content that can be either specific for this slider, or referenced from other content on the website.

### Webform

Used to embed a webform on any page as part of the page content.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://salsa-digital.gitbook.io/govcms-content-administration/civictheme-components-optional/civictheme-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.