# Content components

CivicTheme comes with many out-of-the-box components you can use to build your website.

### Which component to use <a href="#addingcomponents-wip-howdoyouknowwhichcomponenttouse" id="addingcomponents-wip-howdoyouknowwhichcomponenttouse"></a>

There is no right or wrong component to use, it depends entirely on what you're trying to output.

To get started, we recommend clicking on the Storybook links below to visualise each component and experiment with some basic configurations. This will help you decide which component fits your needs.

To read guidelines on how to configure and implement each component, click on the link in the Documentation column below.

<table><thead><tr><th width="192">Documentation</th><th width="417">Description</th><th>Storybook</th></tr></thead><tbody><tr><td><a href="/pages/YByhL5x9F39ppqdo3L8l">Content</a></td><td>Adds a block of text</td><td><a href="https://uikit.civictheme.io/?path=/story/molecules-basic-content--basic-content">Basic content</a></td></tr><tr><td><a href="/pages/yyLT24C5y1IB3B86N1Wu">Accordion</a></td><td>Adds collapsible panes of content</td><td><a href="https://uikit.civictheme.io/?path=/story/molecules-accordion--accordion">Accordion</a></td></tr><tr><td><a href="/pages/uUCuc3PymnmlUeFlZzof">Attachment</a></td><td>Card with title, body and attachments</td><td><a href="https://uikit.civictheme.io/?path=/story/molecules-attachment--attachment">Attachment</a></td></tr><tr><td><a href="/pages/jM4ObXfAymNrXwzrJJHX">Automated list</a></td><td>Create an automated list that can be displayed as Navigation cards or Promo cards</td><td></td></tr><tr><td><a href="/pages/1mYEQYuDAD1yqYbvewAk">Callout</a></td><td></td><td><a href="https://uikit.civictheme.io/?path=/story/molecules-callout--callout">Callout</a></td></tr><tr><td><a href="/pages/iQ4Fg8lLDn3Onka5S1X2">Campaign</a></td><td>A campaign style 'block' with an image, title text and body text</td><td><a href="https://uikit.civictheme.io/?path=/story/organisms-campaign--campaign">Campaign</a></td></tr><tr><td><a href="/pages/xuGSsaFL3g4SbOdffCCC">iFrame</a></td><td>Embedded iFrame</td><td><a href="https://uikit.civictheme.io/?path=/story/atoms-iframe--iframe">iFrame</a></td></tr><tr><td><a href="/pages/bTn70LPwvn0XnSyyUeBe">Manual list</a></td><td>Configurable list of content that uses additional sub-components</td><td></td></tr><tr><td><a href="/pages/dy9gaHwToFT129hSrXQY">Map</a></td><td>Location and embedded map</td><td><a href="https://uikit.civictheme.io/?path=/story/molecules-map--map">Map</a></td></tr><tr><td><a href="/pages/szF5MoeZiDL1v9dFvuc3">Next steps</a></td><td>Clickable card with title, body and link</td><td><a href="https://uikit.civictheme.io/?path=/story/molecules-next-steps--next-steps">Next steps</a></td></tr><tr><td><a href="/pages/lYeHEacWT0wD5cC4YZzf">Promo</a></td><td>Clickable card with title, body and CTA button</td><td><a href="https://uikit.civictheme.io/?path=/story/organisms-promo--promo">Promo</a></td></tr><tr><td><a href="/pages/ZNKWWCMXoiT1cDskO634">Publication card</a></td><td>Card that includes document link</td><td><a href="https://uikit.civictheme.io/?path=/story/molecules-publication-card--publication-card">Publication card</a></td></tr><tr><td><a href="/pages/CUHCpkoMFobu9MQCXyOy">Slider</a></td><td>Image slider (similar to carousel effect)</td><td><a href="https://uikit.civictheme.io/?path=/story/organisms-slider--slider">Slider</a></td></tr><tr><td><a href="/pages/PJKUKcbgf7nkBXQxMpNv">Webform</a></td><td>Webforms</td><td><a href="https://uikit.civictheme.io/?path=/story/organisms-webform--webform">Webform</a></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>


---

# 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/content-authoring/components.md?ask=<question>
```

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.