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.

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

Choosing a component type

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.

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.