Blocks

​

Inserting a new content block

1. Hover over the block above where you need content
2. Click the + icon on the left to open the insert palette
3. Select the block you want

1. On a new line, press / to launch the insert palette
2. Search for the block or scroll through the list
3. Press Enter to insert it

​

Exiting a block

• Click the + button to the left of your content
• Press ⌘ + Enter (Mac) or Ctrl + Enter (PC)

​

Selecting and managing blocks

• Select more blocks by clicking them while holding Shift ⇧
• Move selection up/down using ↑ and ↓ keys
• Copy blocks with ⌘ + C (Mac) or Ctrl + C (Windows)
• Cut blocks with ⌘ + X (Mac) or Ctrl + X (Windows)
• Delete blocks with ⌫ or Del

​

Full-width blocks

• Code blocks
• Images
• Tables
• Cards
• Columns
• Integration blocks

​

Content blocks

​

Hints

• Info — General information, tips, and tricks
• Success — Positive actions or achievements
• Warning — Important information or non-critical warnings
• Danger — Destructive actions or critical information

{% hint style="info" %}
Info hints are great for tips and tricks.
{% endhint %}

{% hint style="warning" %}
Warning hints show important information.
{% endhint %}

​

Code blocks

• Set the syntax for highlighting
• Show line numbers
• Add captions (often filenames)
• Wrap long lines
• Make expandable for long code

• Configuration files
• Code snippets
• Command line examples
• API endpoint calls

import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, window.document.getElementById('root'));

let greeting = function (name) {
  console.log(`Hello, ${name}!`);
};
greeting("Anna");

greeting = lambda {|name| puts "Hello, #{name}!"}
greeting.("Anna")

• Set syntax — Enable language-specific highlighting (uses Prism)
• Line numbers — Toggle line numbers on/off
• Caption — Add a title or filename above the code
• Wrap code — Wrap long lines to avoid horizontal scrolling
• Expandable — Collapse code blocks longer than 10 lines

​

Tabs

• Hover over a tab edge and click + to add
• Open the tab’s Options menu and select Delete to remove

​

Cards

• Medium or large sizes
• Cover images (light and dark mode)
• Target links (click anywhere on card)
• Custom content in each card

• Add target link — Makes the entire card clickable
• Add cover image — Upload images for light and dark mode
• Change size — Medium (3 per row) or Large (2 per row)

​

Tables

• Multiple column types (text, number, checkbox, select, users, files, rating)
• Resizable columns
• Full-width option
• Convert to cards view

• Text — Standard text with formatting
• Number — Numeric values with optional decimals
• Checkbox — Checkable items
• Select — Single or multiple choice from custom options
• Users — Team member names and avatars
• Files — File references with upload support
• Rating — Star ratings with configurable maximum

• Add/remove columns and rows
• Hide/show header row
• Reset column sizing
• Show/hide specific columns
• Make full-width

​

Images

• Dragging and dropping into an empty block
• Adding an image block and using the Select images panel

• Multiple size presets (small, medium, large, fit)
• Alignment (left, center, right)
• Light and dark mode variants
• Captions and alt text
• Image galleries (multiple images in one block)
• Optional frames

​

Expandable

• Step-by-step guides
• FAQ sections
• Optional detailed information
• Keeping pages concise

<details>
  <summary>Add your expandable title here</summary>
  Add your expandable body text here.
</details>

​

Additional blocks

• Lists — Ordered, unordered, and task lists
• Quotes — Block quotes for citations or emphasis
• Columns — Multi-column layouts
• Math & TeX — Mathematical formulas using KaTeX
• Embeds — External URL embeds
• Files — File attachments and downloads
• Drawings — Visual diagrams
• Steppers — Sequential step-by-step guides