Help Center block library
See every content block you can add to a Help Center article, what each one is for, and how to use it.
Written By Markus Palm
Last updated About 2 hours ago
Overview
Content blocks give a Help Center article more structure than plain text: numbered steps, tabs, linked cards, collapsible sections, code, tables, callouts, media, and API blocks.
Add a block: Start a new line, type
/, and keep typing to filter the menu, for example/stepsor/faq. You can also hover a line and click 'Add block' (the + at its left)Move a block: Drag its 'Block options' handle
Duplicate or delete a block: Click the 'Block options' handle and choose 'Duplicate' or 'Delete'
Add blocks inside blocks: The
/menu also works inside steps, tabs, accordions, columns, and table cells
Structure blocks
Structure blocks organize a page into stages, alternatives, choices, and side-by-side content.
Steps
Shows numbered stages, each with a title and its own content. Type /steps to add it with three empty steps.
Common use case: The stages of one setup guide, where readers finish each stage before the next. Not for overviews or lists of options.
Click 'Step options' (the three dots) on a step to change it:
Title style: Text (the default), Heading 2, or Heading 3. With a heading style, readers can click the step number to copy a link to the step. Heading 2 titles also show in the table of contents, so use Heading 2 for setup guides
Add, move, or remove: 'Add step below', 'Move up', 'Move down', or 'Remove step'. The + between two steps or under the last step also adds one
Steps notes
Steps notes
A new step takes the title style of the step above it
Enter on an empty last line of a step adds a step. Press Enter twice in a new, empty last step to leave the block
A step's link comes from its title, so renaming a Heading 2 or Heading 3 step breaks links to the old title
Steps cannot be nested
Tabs
Shows several panels under a row of tab titles, so each reader opens only the version that applies to them. Type /tabs to add it with Tab 1 and Tab 2.
Common use case: Instructions that differ per operating system, framework, or role. When every version is only code, use a Code Group instead.
Add a tab: Click 'Add tab' (the + after the last title)
Reorder or remove: In 'Tab options' (the three dots), choose 'Move tab left', 'Move tab right', or 'Remove tab', or click the × next to a title
Titles: Text only, with no icon. An untitled tab shows a numbered label, such as Tab 2
Readers first see the tab you last selected in the editor. For tabs in your Help Center's top bar, see Organizing your Help Center with tabs.
Tabs notes
Tabs notes
Browser find on page does not search closed panels, so keep information that every reader needs outside the block
The table of contents lists Heading 1 and Heading 2 inside a panel even when its tab is closed
Tabs cannot be nested
Enter on an empty last line of a panel adds a tab. Press Enter twice in a new, empty last tab to leave the block
Card group
Shows a grid of linked cards. Each card has a title, an optional icon and one-line description, and a link to an article, a collection, or a URL. Type /cards to add it with two empty cards.
Common use case: Navigation to one of three or more pages, such as a product map, an integration catalogue, or next steps at the end of a guide.
Hover a card and click 'Card settings' (the three dots in its corner):
Icon: An icon, an emoji, or your own uploaded image
Link: URL, Article, or Collection. A URL can be a web address, a
mailto:link, or a path that starts with/Position and columns: 'Move back' or 'Move forward', and 1, 2, or 3 columns for the whole group
Add or delete: 'Add card' or 'Delete card'
For a single link, use an inline mention instead, as described in Linking & mentioning articles.
Card group notes
Card group notes
Readers do not see a card without a title
Article and collection links keep working when you rename the target. Web addresses and
mailto:links open in a new tabArticle and collection cards show without a link in the Messenger, and when the target is unpublished, deleted, or only in another language
Cards stack in one column on narrow screens, and three columns show only on wide screens
Enter at the end of the last card's description adds a card. Press Enter twice in the new, empty card to leave the group
Columns
Places two pieces of content side by side.
Common use case: Two short lists or paragraphs that readers compare.
Tables cannot go inside Columns.
Horizontal Rule
Adds a divider line. Type /hr to add it.
Common use case: Separating the major sections of an article.
Collapsible blocks
Collapsible blocks keep optional detail out of the way. Keep procedures, prerequisites, warnings, and expected results in the open body, because readers who skim do not open collapsed sections.
In all three blocks, the table of contents still lists Heading 1 and Heading 2 headings. The Markdown version of the article also includes the hidden content, as described in Making your Help Center readable for AI tools.
Accordion
Shows one section with a title that readers click to open and close. Type /accordion, choose 'Accordion', and type the title in the New accordion line. Click the arrow next to the title to add the content.
Common use case: A single uncommon scenario or a long example inside a section.
Accordions always start closed for readers, even when you open one in the editor. An open accordion puts a link to itself, based on its title, in the address bar. To link to an accordion, open it on the published article and copy the address.
Accordion notes
Accordion notes
Accordions and accordion groups cannot go inside an accordion
Renaming an accordion breaks links to it
To show optional detail open at first, use an Expandable with Open by default turned on
Accordion Group
Shows several accordions in one bordered stack. Type /faq and choose 'Accordion Group' to add it with two accordions. Each one works like a single Accordion.
Common use case: The questions of an FAQ section at the end of an article, all in one group instead of separate accordions.
To add an accordion, click 'Add accordion' (the + under the group), or press Enter on the title of a closed accordion.
Accordion Group notes
Accordion Group notes
To leave the group, press Enter on the empty title of the last accordion
To remove an accordion, press Backspace in its empty title while its content is empty
Expandable
Shows a small Show more toggle that reveals optional content. Type /expandable, then click the toggle to add the content.
Common use case: Optional detail, such as advanced options, that can also start open.
Click 'Expandable settings' (the three dots on the toggle):
Title: Changes the toggle text. For example, the title advanced options shows Show advanced options and Hide advanced options instead of Show more and Show less
Open by default: Shows the block open at first. Otherwise, it starts closed
Delete: 'Delete expandable' removes the block
Expandable notes
Expandable notes
The title is required, so an empty title field keeps the last title
An expandable cannot go inside another expandable
Code and table blocks
Code blocks show code with syntax highlighting and a copy button, and tables compare items in rows and columns. For a short value inside a sentence, select the text and click 'Code' in the formatting toolbar instead of adding a code block.
Regular Code-Block
Shows one code snippet. Type /code and choose 'Regular Code-Block', or select text and click 'Code block' in the formatting toolbar.
Common use case: A command, a configuration file, or a JSON response.
Language: A new block shows text on its language button, with no highlighting. Choose a language, such as Bash, JSON, Python, or YAML, to highlight the code
Wrap: 'Wrap long lines' and 'Disable line wrapping' change only the editor view. Published articles always wrap long lines
Copy: 'Copy code' copies the block. Readers see the copy button when they point at the code
Regular Code-Block notes
Regular Code-Block notes
Code blocks have no line numbers, highlighted lines, or diff view
A single code block has no title or file name. To label code, use a Code Group, even with one tab
Code Group
Shows several code blocks in tabs, one per language, file, or package manager. Type /code group and choose 'Code Group' to add it with one tab named Example.
Common use case: cURL, JavaScript, and Python versions of the same request.
Tabs: Click 'Add tab' (the +) to add a tab, or the × on the selected tab to remove it. Each tab has the same controls as a Regular Code-Block
Remove: 'Remove code group' removes the whole group
Readers see the first tab open, and the copy button copies the open tab.
Code Group notes
Code Group notes
Tabs cannot be reordered, so add them in the order readers should see them
A tab without a title shows its language or a numbered label
Older multi-code blocks open as code groups when you edit their article
Table
Shows a grid with a header row for the column names. Type /table to add it with three columns and three rows, including the header row.
Common use case: Comparing features, roles, error codes, or settings across the same attributes.
Add at the end: 'Add row' (the + under the table) or 'Add column' (the + at the right edge)
Column menu: Click the grip above a column to add a column before or after it, move it, align its text, copy it, or delete it
Row menu: Click the grip to the left of a row to add a row before or after it, copy it, or delete it
Width: Drag the right border of a column. The last column has no resize border
Table notes
Table notes
Cells cannot be merged, split, or colored
The header row cannot be turned off
Rows cannot be moved
To delete the whole table, click its 'Block options' handle and choose 'Delete'
Callout and media blocks
These blocks highlight a point or show what text cannot.
Callout
Shows a highlighted box for a note, tip, or warning.
Common use case: A prerequisite, limit, or warning that readers must not miss.
Image or Video
Adds a screenshot, a diagram, or a short clip.
Common use case: A screenshot of a setting next to the explanation that uses it.
Embeds
Embeds a YouTube, Loom, or Descript video, or another page through Custom iframe.
Common use case: A recorded walkthrough of a setup or workflow.
API blocks
The API group appears in the / menu when API documentation is available in your Workspace. Its blocks let you write an endpoint page in a regular article, with the same layout as pages generated from an OpenAPI spec. See API documentation overview.
When an endpoint is in your spec, use the generated page instead, and add your extra text to it as an endpoint intro. The generated page stays in step with each upload and has Try it, code samples, and the version switcher, which a hand-written page lacks.
To change a block's settings or delete it, click the three dots on the block.
API endpoint
Shows the method badge and the path of an endpoint. Choose 'API endpoint' in the / menu to add it.
Common use case: An endpoint that is not in your spec, or a guide that walks through one call step by step.
Method: GET, POST, PUT, PATCH, or DEL (DELETE)
Path: Put path parameters in braces, such as
/v1/users/{id}. Readers see each{parameter}highlightedServer: Optional, such as
https://api.example.com. It shows below the path
API endpoint notes
API endpoint notes
The API reference tab appears after you publish an API reference. Until then, keep hand-written pages in a regular collection
To list a hand-written page in the API reference tab, add it as a guide section
Parameter
Documents one request parameter. Choose 'Parameter' in the / menu and write the description inside the block.
Common use case: One block for each path, query, header, or body parameter of an endpoint.
Set the Name, Location (Path, Query, Header, or Body), and Type, such as string. You can also set a Default and turn on Required or Deprecated. Readers see each option as a label, except the location of a body parameter. To leave the block, press Enter on an empty last line.
Response field
Documents one field of the response. Choose 'Response field' in the / menu and write the description inside the block.
Common use case: One block for each field that the endpoint returns.
Set the Name and Type. You can also set a Default and turn on Required or Deprecated.
Request example
Shows example requests in code tabs, starting with a cURL tab. Choose 'Request example' in the / menu and replace the sample code.
Common use case: The same request in cURL and other languages, such as Python.
Click a tab's title to rename it, and click 'Add tab' to add another. Each tab has its own language, copy button, and line wrapping.
Response example
Shows example responses in code tabs, starting with a 200 tab. Choose 'Response example' in the / menu and replace the sample code.
Common use case: One tab for each status code that the endpoint returns.
Its tabs work like the tabs of a Request example.
More in Optimize
Linking & mentioning articlesStill need help? Ask the team