Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Components

Components are reusable building blocks that Authors and Approvers add to a page below the Content field — accordions, cards, tabs, statistics, galleries and more. They let a page go beyond what the WYSIWYG editor can do while keeping everything structured and accessible.

Adding a component

At the bottom of the Components field choose a Component type and click Add Component. The component's own form opens in place.

Adding a component

Managing components

Saved components are listed collapsed, with their type and a one-line summary.

The component list

  • Edit opens a component; Edit all opens every component at once.

  • Drag the handle on the left to reorder.

  • The ⋮ menu offers Duplicate, Collapse and Remove. A removed component comes back only if you leave the page without saving.

  • Components are saved with the page: nothing is stored until you click Save.

Component actions

Every component has the same fields at the top — Title (used only in the edit form), Heading, Hide heading and Introduction — and a Presentation group at the bottom that controls style, layout, palette, texture, pattern, overlay and modifiers. See Component header, Presentation and Modifiers.

Container components — Section, Hero, Accordion Group, Tabs, Item List, Slider — hold child components or items. Add children from the field inside the container the same way.

Accordion Group

Expandable and contractible content, shown and hidden by clicking a title. Good for FAQs and long reference material.

See an accordion group on the demo site: https://govcms.convivial.io/demo/components/accordion

An accordion group

  1. Add an Accordion Group component.

  2. Under Accordions add an Accordion for each entry, with a Title and Content.

  3. Set each accordion's Orientation to Open if it should start expanded.

  4. Tick Make FAQ on an accordion to output it as FAQ structured data (Schema.org JSON-LD). This helps search engines and AI assistants find the answer rather than misrepresenting it.

The accordion group form

Card

A multipurpose card with an image, heading, body and a button.

See a card on the demo site: https://govcms.convivial.io/demo/components/card

A card

  1. Add a Section component, then a Card inside it. Several cards in one section form a row.

  2. Image — the card image; Card side puts it beside the content instead of above.

  3. Badge — a short label on the card.

  4. Heading and Body.

  5. Read more — a button linking to a page or external URL, aligned with Actions alignment.

  6. Size, Text alignment and Center adjust the card's proportions and alignment.

The card form

Chart

Displays numerical data as a Line, Area, Bar, Pie or Donut chart, with configurable colours, axes, legend and grid.

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

A chart

To make a stacked bar chart:

  1. Add a Chart component.

  2. Under CSV enter the data. The first row, starting with x, names the columns; each further row becomes a series:

    Or link to a CSV file with CSV URL.

  3. Set Type to Bar, Stacking to Absolute values and X axis type to Category.

  4. Add X axis label and Y axis label, and choose where the Legend sits.

  5. Fill in Transcript with a text description of the data — the chart itself is not readable by screen readers.

The chart form

Content

A block of rich text with a heading. Everything the WYSIWYG editor does — images, video, buttons — works here. The reason to use it instead of the page's Content field is that a Content component can have its own palette, layout and modifiers, and can sit inside a Section as a column.

See a content component on the demo site: https://govcms.convivial.io/demo/components/content-component

A content component
The content form

Datatable

Displays a CSV file as an interactive table with sorting, searching and paging. Use it instead of an editor table for anything larger than a few rows.

See a datatable on the demo site: https://govcms.convivial.io/demo/components/datatable

A datatable

  1. Add a Datatable component.

  2. Under CSV choose or upload a CSV file as File media. The first row is the header.

  3. Tick Ordering, Searching and Paging as needed, and set Page length (rows per page, e.g. 10, 25, 50).

The datatable form

Diff

Two images with a slider: drag it to reveal more of either image. Good for before-and-after photos.

See a diff on the demo site: https://govcms.convivial.io/demo/components/diff

A diff

  • Before — the first image.

  • After — the second image.

The diff form

Gallery

A grid of images and videos that open in a browsable lightbox.

See a gallery on the demo site: https://govcms.convivial.io/demo/components/gallery

A gallery

  1. Add a Gallery component.

  2. Under Media choose the images and videos.

  3. Set Gallery layout (Full width, Equal, Halves … Sixths) and whether to Show controls.

The gallery form

GeoChart

Colours geographic regions — countries, states or cities — by value, using Google GeoChart.

See a geochart on the demo site: https://govcms.convivial.io/demo/components/geochart

A geochart

  1. Add a GeoChart component.

  2. Provide the data as CSV (region, value) or a URL — one or the other, not both.

  3. Set the Region to display, e.g. AU, and the Resolution (Countries, Provinces, Metros).

  4. Set the Display mode: Regions colours areas, Markers places dots, Text places labels.

  5. Colour axis takes a comma-separated list of colours from low to high, e.g. LightBlue, DodgerBlue, RoyalBlue, Navy. Background colour can be transparent.

The geochart form

Hero

A container with a large image on one side and child components on the other. Use it at the top of a landing page. Only Site administrators can add a Hero; Authors can edit the content inside an existing one.

See a hero on the demo site: https://govcms.convivial.io/demo/components/hero

A hero

  1. Add a Hero component and choose the Image.

  2. Set Image side (Start or End), Image width (Half, Third, Quarter) and an Image variant — the shape cut into the image's inner edge: slants, corners, curves, arrows or waves.

  3. Add the Components to show beside the image, typically a Content component and a Card or Item List.

The hero form

Item List

A list of hand-written items, each with a heading, image or icon, summary and link. Unlike a Node List, items can link anywhere — external sites, documents, anchors — and work well as an icon grid.

See an item list on the demo site: https://govcms.convivial.io/demo/components/item-list

An item list

  1. Add an Item List component.

  2. Under Items click Add Item. Each item has a Heading, URL, Summary, Image or Phosphor Icon, an Info label shown beside the heading and an optional Date.

  3. Set Item list layout to the number of columns (Halves, Thirds, Quarters …) and choose a View mode — the card style, e.g. Stack.

The item list form

Lightbox

A single image that opens full-size, or opens a video, when clicked.

See a lightbox on the demo site: https://govcms.convivial.io/demo/components/lightbox

A lightbox

  • Media — the image or video to open.

  • Thumbnail — the image shown on the page; leave empty to use the media itself.

The lightbox form

Map

Plots GeoJSON data on an interactive map. Several data sources can be combined, as pasted text or URLs.

See a map on the demo site: https://govcms.convivial.io/demo/components/map

A map

  1. Add a Map component.

  2. Paste GeoJSON into GeoJSON text or link to it with GeoJSON URL.

  3. Set the Ratio of the map's height to its width.

The map form

Media List

A list of media items — documents to download, images, videos — laid out like an Item List.

See a media list on the demo site: https://govcms.convivial.io/demo/components/media-list

A media list

  1. Add a Media List component.

  2. Under Media choose the items.

  3. Set Media list layout and a View mode.

The media list form

Node List

A list of pages on the site, shown as cards or teasers using each page's own title, description and thumbnail. This is the recommended way to link to content: when a page changes, the list follows.

See a node list on the demo site: https://govcms.convivial.io/demo/components/node-list

A node list

  1. Add a Node List component.

  2. Under Nodes type a page title into the autocomplete and pick it. Repeat for each page.

  3. Set Node list layout to the number of columns and choose a View mode, e.g. Stack.

  4. Read more adds a link below the list, to a listing page for example.

The node list form

Section

A container that lays out child components in columns and gives them a shared background. Most pages built from components are a series of Sections.

See a section on the demo site: https://govcms.convivial.io/demo/components/section

A section

  1. Add a Section component.

  2. Set Column width — Full, Halves, Thirds or Quarters — to control how many children sit side by side.

  3. Add the child Components.

  4. Section styles such as Equal height, No column gaps or Align items center fine-tune the layout.

The section form

Slider

A slideshow of content items with configurable transitions and navigation.

See a slider on the demo site: https://govcms.convivial.io/demo/components/slider

A slider

  1. Add a Slider component.

  2. Under Content items add the items and choose a View mode for the slides, e.g. Image card.

  3. Configure the show: Direction, Transition effect (Slide, Fade, Cube, Coverflow, Flip, Cards), Slides per view, Slides per group, Space between, Speed, Rows, Show navigation and Pagination (Bullets, Fraction, Progress bar).

The slider form

Stats

Animated headline numbers that count up when scrolled into view.

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

Stats

  1. Add a Stats component.

  2. Under Stats add a Stat for each number with a Value, an optional Prefix (e.g. $) or Suffix (e.g. %), and a Description.

  3. Set Stats layout to the number of columns.

The stats form

Tabs

Content in a tabbed interface. Good for a few parallel options that do not need to be read in order.

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

Tabs

  1. Add a Tabs component.

  2. Under Tabs add a Tab for each panel with a Label, optional Icon, and either Body text or child Components. Tick Is default on the one that opens first.

  3. Set Placement (Top or Bottom) and Size.

The tabs form

Timeline

A series of dated events along a vertical or horizontal line.

See a timeline on the demo site: https://govcms.convivial.io/demo/components/timeline

A timeline

  1. Add a Timeline component and choose its Direction.

  2. Under Items add a Timeline Item for each event:

    • Start heading and Start body — shown before the marker (top or left).

    • Icon — a Phosphor icon name for the marker, e.g. check-circle.

    • End heading and End body — shown after the marker (bottom or right).

  3. Compact tightens the spacing; Snap icon aligns the marker with the start of the heading on vertical timelines.

The timeline form

Model

3D models are added as Model media and embedded like an image through the editor's Insert Media button. Visitors can rotate and zoom the model.

See a model on the demo site: https://govcms.convivial.io/demo/components/model

A 3D model
PreviousWYSIWYG
NextAdvanced components

Last updated