# 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="components/content">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="components/accordion">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="components/attachment">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="components/list-components-and-cards/automated-list">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="components/callout">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="components/campaign">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="components/iframe">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="components/list-components-and-cards/manual-list">Manual list</a></td><td>Configurable list of content that uses additional sub-components</td><td></td></tr><tr><td><a href="components/map">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="components/next-step">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="components/promo">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="components/list-components-and-cards/cards-for-lists/publication-card">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="components/slider">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="components/webform">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>