> 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/content-editing/components.md). # 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](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) ## Managing components Saved components are listed collapsed, with their type and a one-line summary. ![The component list](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-fd6f9b5f2f00c3ed8a5184d43ebab664c9a85f2f%2Fcomponents-list.png?alt=media) * **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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-32893dbdd4391a7acbe200681c8a51946e73cf20%2Fcomponents-actions.png?alt=media) 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](/convivial-for-govcms/concepts-and-tools/component-header.md), [Presentation](/convivial-for-govcms/content-editing/components/presentation.md) and [Modifiers](/convivial-for-govcms/concepts-and-tools/modifiers.md). 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: ![An accordion group](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-18159a73dc834bd9466efe3ac8df2ea8a23d7de6%2Fc-accordion.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-49a0e4b7a5449bdde6a4f02462f9a8f6dc40a061%2Ff-accordion.png?alt=media) ## Card A multipurpose card with an image, heading, body and a button. See a card on the demo site: ![A card](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-2afe38f28bd84775d606f45b4a3f6994283f397f%2Fc-card.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-613b2257e6bd104ea4ec81cb99784879c6409a8b%2Ff-card.png?alt=media) ## 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: ![A chart](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-a6f1d10de66cbd3f697b0c69521e6cc11bb5dce0%2Fc-charts.png?alt=media) 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: ``` x, Internet Explorer, Chrome, Firefox, Safari, Opera Current share, 56.3, 24.03, 10.38, 4.77, 0.91 Predicted share, 10, 30, 20, 10, 10 ``` 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-ceaab742d5fd0c9dfa41584f7405f7b5f0cb09f8%2Ff-charts.png?alt=media) ## 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: ![A content component](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-4243071862ebe168866b55f4e1409421feec5367%2Fc-content-component.png?alt=media) ![The content form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f4b377a51b514364a808ca9a61fbcf51b80e6372%2Ff-content-component.png?alt=media) ## 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: ![A datatable](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-d225d2661ae539f950f13bc122a8d427066f1cc8%2Fc-datatable.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-1de313ff05e2fbbd0eeed3f254554a81b0753f41%2Ff-datatable.png?alt=media) ## 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: ![A diff](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-c190413e872756a733c52fe141adeab9920d5924%2Fc-diff.png?alt=media) * **Before** — the first image. * **After** — the second image. ![The diff form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-d8c21465661f22a0017571d12a1d5d6a4011bf2d%2Ff-diff.png?alt=media) ## Gallery A grid of images and videos that open in a browsable lightbox. See a gallery on the demo site: ![A gallery](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-3e2f9811d8a60cd59cf8643a463174fc0250b96f%2Fc-gallery.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-7fdcb2aebcc2a03a744a454bdf6e726434252ad3%2Ff-gallery.png?alt=media) ## GeoChart Colours geographic regions — countries, states or cities — by value, using Google GeoChart. See a geochart on the demo site: ![A geochart](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-d422184c45809bfc687916179df37c1df62eef60%2Fc-geochart.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-0bd16fdae9d37426038526f7f12756aa41364d08%2Ff-geochart.png?alt=media) ## 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: ![A hero](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-7bf7ea37b0c232d7e07b1d7a65b866ac0ec660b1%2Fc-hero.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-5841df96c4f7de24c39c01781cf54a2dadcd38c4%2Ff-hero.png?alt=media) ## 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: ![An item list](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-5740ab91a1abd13ad6488b69e86ef84e9e8e747b%2Fc-item-list.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-9df53074fa322fc70d9c950fe9cef6562e471f85%2Ff-item-list.png?alt=media) ## Lightbox A single image that opens full-size, or opens a video, when clicked. See a lightbox on the demo site: ![A lightbox](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-28c45c130f24538390f6a0ec35e60aee9a9a6a94%2Fc-lightbox.png?alt=media) * **Media** — the image or video to open. * **Thumbnail** — the image shown on the page; leave empty to use the media itself. ![The lightbox form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-69f14cc1a6f9ff4b697083b88ccccef23d53b889%2Ff-lightbox.png?alt=media) ## 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: ![A map](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-a193397211549d8556640289846a21bcfa302ae8%2Fc-map.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-5507d467d2dde7d3ca793d0d7e243159e50e34d3%2Ff-map.png?alt=media) ## 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: ![A media list](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-7de75f6db79ec0e8a757ebda7f70d161fa01b434%2Fc-media-list.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-e68ad5fac31467b332a1c55090ccd3ee2439f7db%2Ff-media-list.png?alt=media) ## 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: ![A node list](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-504dfd8b7730a64349cd99c2915f011e6254ced4%2Fc-node-list.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-0a148c8aad1c6c00883013208b0da83542d89e90%2Ff-node-list.png?alt=media) ## 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: ![A section](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f35998570d04eee033dc08abf5ea68a2cc819ff8%2Fc-section.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-dd052ecdcc99629e57af76184632dc3916e93533%2Ff-section.png?alt=media) ## Slider A slideshow of content items with configurable transitions and navigation. See a slider on the demo site: ![A slider](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-044897b23ecaee7bf05392afb6bd61919ae229c7%2Fc-slider.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-cda6957a052e4c0e5a4437bcddeab56d9b165f82%2Ff-slider.png?alt=media) ## Stats Animated headline numbers that count up when scrolled into view. See stats on the demo site: ![Stats](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-b8e52c71b3fc6a2034a017d57ee0ac22ea85e4dc%2Fc-stats.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-7a21028b4f7796ad6adc25b010284ddbfa70d4a2%2Ff-stats.png?alt=media) ## 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: ![Tabs](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-4ba8cfded6bf8fee2c04c163e9f1720cde1e20c8%2Fc-tabs.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-ef06830d4619b65237be7bc6341b3113207b61a3%2Ff-tabs.png?alt=media) ## Timeline A series of dated events along a vertical or horizontal line. See a timeline on the demo site: ![A timeline](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-850c15565953304419db4e3306b6d39590f262b2%2Fc-timeline.png?alt=media) 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-e54a33232c11359c7438f23538a5c7fea3c930d9%2Ff-timeline.png?alt=media) ## 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: ![A 3D model](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-b7de43fbb1e59b9ca07f74278c0f10053ed2eb0e%2Fc-model.png?alt=media)