Block formatting

You can add quotes, notes, collapsible text, custom-designed blocks, or clusters with multiple cells to an issue description or comment.

In the visual editor, you can drag and drop blocks and other elements (like paragraphs and headings) to rearrange them or create nested structures. To move the block, hover over it and drag the  icon on the left side.

You can use other markup elements inside the block formating elements.

To add a block to a page, select one or more paragraphs and use the toolbar buttons or keyboard shortcuts:

Block Toolbar button Windows shortcuts MacOS shortcuts
Comment Ctrl + Shift + 8  +  + 8
Cut Ctrl + Shift + 7  +  + 7
Tabs
Quote Ctrl + >  + >
Formatting block
Section

Note

  1. To add a note, click  Note on the toolbar.

    You can also use the quick access menu: type / and select a command from the list.

  2. In the menu under the block, select a note type:

    •  Note
    •  Tip
    •  Important
    •  Alert
  3. Enter the note title and text. Use other text formatting elements.

  4. To delete a block, click in the menu under the block.

To place the "Note" block, add code in the following format to the page:

{% note <note_type> "Heading" %}

Add content for the note

{% endnote %}
  • Specify the note type:

    • {% note info %}: Note.

    • {% note warning %}: Important.

    • {% note alert %}: Attention.

    • {% note tip %}: Tip.

  • To change the text of the default title, add a custom title in quotation marks ("") after the specified type.

Cut

  1. To add a cut, click  Cut on the toolbar.

    You can also use the quick access menu: type / and select a command from the list.

  2. Enter the cut title and text. Use other text formatting elements.

  3. To collapse or expand a cut, click .

To place the "Cut" block, add code in the following format to the page:

{% cut "Cut title" %}

Content that appears when users click on it.

{% endcut %}

Tabs

  1. To add a block with tabs to the page, click  Tabs on the toolbar.

    You can also use the quick access menu: type / and select a command from the list.

  2. To add a new tab, click in the list of tabs.

  3. To delete a tab, click to the right of its title.

  4. To switch between tabs, click the title of the tab you need.

  5. Add content to tabs by using other text formatting elements.

To place the "Tabs" block, add code to the page in the following format:

{% list tabs group=editor %}

- First tab title

    First tab text

- Second tab title

    Second tab text

{% endlist %}

Make an indent of 2–4 spaces before the tab text and press Tab.

Quote

  1. To add a quote, click  Quote on the toolbar.

    You can also add formatting elements using your keyboard or through the quick access menu: type / and select an item from the list.

  2. Use other text formatting elements inside quotes.

  3. Separate the quote from the other text with an empty line.

> To display a quote, use this character.
>>To create a nested quote, add two such characters at the beginning of the paragraph.
  • To create a quote, use the character >.

  • To create a nested quote, insert the >> characters at the start of the paragraph.

Formatting block

  1. To add a formatting block, click  Formatting block on the toolbar.

    You can also use the quick access menu: type / and select a command from the list.

  2. To set up rules for a formatting block, click in the top right corner of the block:

  • Alignment: Position of the block relative to the other page content:

    • None: No alignment. The block will be fixed to the left side of the page, and no other content will appear on the same line.
    • Left: Left-aligned.
    • Center: Centered.
    • Right: Right-aligned.
  • Width: Block width in pixels (px).

  • Indents: Padding between the border and block content.

  • Border type: Border layout:

    • None: No border.
    • Solid: Solid line.
    • Dashed: Dashed line.
  • Border size: Border thickness.

  • Border color: Color of the border:

    • Info: Blue.
    • Tip: Green.
    • Warning: Orange.
    • Alert: Red.

To place a formatting block, add code to the page in the following format:

{% block align=center width=1000 padding=xs border=solid borderSize=m borderColor=warning %}

Text inside the block

{% endblock %}

Block parameters:

  • align: Position of the block relative to the other page content. Optional.

    Possible values:

    • left: Left-aligned.
    • center: Centered.
    • right: Right-aligned.
  • width: Block width in pixels (px). Optional.

  • padding: Internal indent between the border and block content. Optional.

    Possible values:

    • xs: 4 px
    • s: 8 px
    • m: 12 px
    • l: 16 px
    • xl: 20 px
  • border: Border layout. Optional.

    Possible values:

    • solid: Solid line.
    • dashed: Dashed line.
  • borderSize: Border thickness.

    Possible values:

    • xs: 1 px
    • s: 2 px
    • m: 4 px
    • l: 6 px
  • borderColor: Border color. If not specified, the border will be black.

    Possible values:

    • info: Blue.
    • tip: Green.
    • warning: Orange.
    • alert: Red.

Section

  1. To add a section and split a part of your page into multiple cells, click  Section on the toolbar.

    You can also use the quick access menu: type / and select a command from the list.

  2. To add a new cell, click the space with the  icon between two existing cells. You can use other markup elements of the new editor inside the cell.

  3. To change the cell width, click in the top right corner of the cell and update the Width field value.

  4. To delete a cell, click  Delete cell in the top right corner of the cell.

  5. To change display mode for all cells at once, click any cell. This opens a menu where you can:

  • Set the number and size of cells using one of the four templates:

    •  Two cells
    •  Large on the right
    •  Large on the left
    •  Three cells
  • Align the cells block relative to the other page content:

    •  Entire section left-aligned
    •  Entire section centered
    •  Entire section right-aligned
  • Click to delete a section.

To place a section, add code to the page in the following format:

{% layout gap=l cols=auto justify=start %}

{% block col=3 %}

First cell content

{% endblock %}

{% block col=7 %}

Second cell content

{% endblock %}

{% block col=1 %}

Third cell content

{% endblock %}

{% endlayout %}

Block parameters:

  • By default, sections are stretched at full page width. To change the block alignment, specify the cols=auto and justify= parameters for layout with the following values:

    • start: Left-aligned.
    • center: Centered.
    • end: Right-aligned.
  • To add a cell, insert its opening tag {% block %} and its closing tag {% endblock %} between the main tags.

  • For block, set the cell width col= to a value between 1 and 12.

  • Make sure there is at least one-line indent between the cell tags and content.