> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/site-structure/component-types.md).

# Component types

Components are the structured blocks that make up a page below its body text. They are grouped here by what they do; how to add and configure each one is in [Components](/convivial-for-govcms/content-editing/components.md).

See every component on the demo site: <https://govcms.convivial.io/demo/components>

![Choosing a component type](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-361c3154245cc02870fccbc67ae03d0941729ca5%2Fcomponents-add.png?alt=media)

## Layout containers

| Component   | Use it for                                                                       |
| ----------- | -------------------------------------------------------------------------------- |
| **Section** | A container with a layout (columns, spacing) for the components inside it.       |
| **Hero**    | A container with a side image and child components. Site administrators only.    |
| **Content** | A block of rich text with a title. Use inside a Section to make columns of text. |

## Lists

| Component                | Use it for                                                                                        |
| ------------------------ | ------------------------------------------------------------------------------------------------- |
| **Item List** / **Item** | A list of hand-written items (title, image, summary, link), shown as cards, a grid or a list.     |
| **Node List**            | Like Item List but the items are pages on the site, so they stay in sync when those pages change. |
| **Media List**           | Like Item List but the items are media.                                                           |
| **Card**                 | A single card with an image and content.                                                          |
| **Slider**               | A slideshow of content items.                                                                     |

## Interactive

| Component                           | Use it for                                                      |
| ----------------------------------- | --------------------------------------------------------------- |
| **Accordion Group** / **Accordion** | Expandable sections. Good for FAQs and long reference material. |
| **Tabs** / **Tab**                  | Tabbed panels.                                                  |
| **Gallery**                         | A grid of photos and videos that open in a lightbox.            |
| **Lightbox**                        | A single image that expands to a full-size image or video.      |
| **Timeline** / **Timeline Item**    | A vertical or horizontal list of dated events.                  |
| **Decision Flow**                   | A guided series of questions leading to an answer.              |
| **Diff**                            | Two images with a slider to compare them.                       |

## Data

| Component            | Use it for                                  |
| -------------------- | ------------------------------------------- |
| **Stats** / **Stat** | Animated headline numbers.                  |
| **Chart**            | Charts from CSV data.                       |
| **GeoChart**         | Data plotted on a map of a region.          |
| **Datatable**        | A CSV file as a sortable, searchable table. |
| **Map**              | GeoJSON locations on a map.                 |

## Embeds

| Component                                                        | Use it for                                           |
| ---------------------------------------------------------------- | ---------------------------------------------------- |
| **Embedded Webform**                                             | A form built in Webform.                             |
| **iFrame**                                                       | Content from another site. Site administrators only. |
| **Embedded View**, **Embedded Block**, **Embedded Custom Block** | Listings and blocks built elsewhere on the site.     |
| **Snippet**                                                      | A JavaScript snippet. Site administrators only.      |

## Personalised components

**Personified Content**, **Personified Data**, **Recombee Scenario**, **Recombee Search** and **Parameter** render content that varies by visitor. See [Advanced components](/convivial-for-govcms/content-editing/components/advanced-components.md).

## Presentation modifiers

Modifiers are added inside a component's **Presentation** group and change how it looks or behaves rather than adding content — backgrounds, gradients, padding, animation, audience visibility. See [Modifiers](/convivial-for-govcms/concepts-and-tools/modifiers.md).