> 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/blocks.md).

# Blocks

Blocks are the reusable pieces of the site that are not pages: the logo, search box, feedback form, social links, promotions and modals. Their content lives in the custom block library; where they appear is decided in the block layout.

## Custom block library

*Manage → Content → Blocks* (`/admin/content/block`) holds the reusable blocks that sit in the site's regions or are embedded on pages: the logo, search, feedback and social share blocks, modals, promotions and so on. Edit a block here to change it everywhere it is placed.

See an embedded custom block on the demo site: <https://govcms.convivial.io/demo/components/embedded-custom-block>

![The custom block library](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-d4bab7f26e3a309c6af999901e29ac982bf48f68%2Fblock-library.png?alt=media)

To embed a custom block on a page, use the **Embedded Custom Block** component — see [Advanced components](/convivial-for-govcms/content-editing/components/advanced-components.md).

## Block types

Each block in the library has a type, chosen when it is added. The type decides the block's fields.

| Block type                 | What it does                                                         |
| -------------------------- | -------------------------------------------------------------------- |
| **Colour Scheme Switcher** | Lets readers switch the site's colour scheme.                        |
| **Components**             | A container for a set of components.                                 |
| **Content**                | Simple rich text content.                                            |
| **Feedback**               | A button that links to the feedback form.                            |
| **Logo**                   | The logo image, with versions for different screen sizes.            |
| **Modal**                  | A dialog that opens from a button, with a choice of placement.       |
| **Personified Data**       | Turns JSON data into HTML with a template.                           |
| **Promotion**              | A promotion that can be shown to readers with particular attributes. |
| **QuantSearch Modal**      | The QuantSearch search dialog and its settings.                      |
| **Quick Exit**             | A button that lets readers leave the site quickly.                   |
| **ReadSpeaker**            | A listen button that reads the page aloud.                           |
| **Search**                 | The site search form.                                                |
| **Sequence**               | A step-by-step list of pages. See [Sequence](#sequence).             |
| **Social Share**           | Links to share the page on social services.                          |
| **Translate**              | A list of languages to translate the page into.                      |

### Sequence

A Sequence is a numbered list of pages that make up a process, such as the steps of an application. Readers can follow it from step to step: the page they are on is highlighted, along with every step before it.

1. Add a block of type **Sequence** in the custom block library (*Add content block* → *Sequence*).
2. Enter a **Block description**. It names the block in the library only; it is not shown on the page.
3. Under **Steps**, add the pages in order. Drag them to reorder.
4. Set the display options:
   * **Direction**: *Vertical* (the default) or *Horizontal*. A horizontal Sequence turns vertical when its column is narrow, such as on a phone. Use vertical for more than 4 or 5 steps.
   * **Show description**: shows each step page's **Description** under its title.
   * **Show icon**: shows each step page's **Icon** in place of its number. A page with no icon keeps its number.
5. Save, and note the block's ID from the URL.
6. On each page where the Sequence should appear, add an **Embedded Custom Block** component with that ID. Usually that is every page in the Sequence.

The Sequence has no heading of its own. Give the Embedded Custom Block component a **Heading**, such as "Apply for a grant"; if the heading shouldn't be visible, tick **Hide heading** to keep it for screen readers.

Only pages the reader can see are listed: an unpublished step is left out for visitors. Adding, editing and deleting Sequences is a Structure task.

## Block layout

*Manage → Structure → Block layout* (`/admin/structure/block`) decides which blocks appear in which region — header, sidebar, footer. Placing and removing blocks is a Site administrator task; Structure users only edit the block content.

![Block layout](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-6afb9818869e8b532cb706cdd069ca90743f40d5%2Fblock-layout.png?alt=media)