Text formatting

Headers

6 levels of HTML headings are supported:

<h1>h1. Turbo heading</h1>
<h2>h2. Turbo heading</h2>
<h3>h3. Turbo heading</h3>
<h4>h4. Turbo heading</h4>
<h5>h5. Turbo heading</h5>
<h6>h6. Turbo heading</h6>
Copied to clipboard
Heading customization
To style your headings with CSS, use the following class selectors:
h1 .title_size_l
h2 .title_size_m
h3 .title_size_s
h4 .title_size_xs
h5 .title_size_xxs
h6 .title_size_xxxs

Inline tags

You can use main HTML tags for the text formatting.

<p>Paragraph.</p>
<p><b>Text in bold.</b></p>
<p><strong>Important text.</strong></p>
<p><i>Italic text</i></p>
<p><em>Emphasized text.</em></p>
<p>2<sup>10</sup> = 1024<p>
<p>H<sub>2</sub>SO<sub>4</sub><p>
<p>Main text, 
<p>Main text, 
<p><small>Text 1em smaller</small></p>
<p><big>Text 1em bigger</big></p>
<code>code</code>
Copied to clipboard
List of all supported tags
  • h1–h6
  • p
  • a
  • br
  • hr
  • ul
  • ol
  • li
  • b
  • strong
  • i
  • em
  • sup
  • sub
  • ins
  • del
  • small
  • big
  • pre
  • abbr
  • U
  • table
  • div
  • code

Links in the text

Turbo pages support several link types:

  • Link to another page on the site.
  • Link to an anchor within the page or to an anchor on another page.

To add links in Turbo pages, use the a element:

<a href="Link"
   data-turbo="true">Link text</a>
Copied to clipboard
href *
URL or anchor.
data-turbo

Attribute that determines which page version opens when clicking the link. Possible values:

  • true — The link opens the Turbo version of the page, if it is generated. Set as default.
  • false — The link opens a regular page or its mobile version.

If the data-turbo attribute is omitted, the link opens a Turbo page, if it was generated.

Link examples:

<a href="http://example.com/page2/">Link to another Turbo page</a><br>
<a href="http://example.com/page2/" data-turbo="false">Link to the regular page</a><br>
<a href="http://example.com/page2/#topic2">Link to the anchor of another page</a><br>
<a href="http://example.com/page1/#title">Link to the h1 heading on this page</a><br>
<a href="#component">Link to the accordion content on this page</a><br>
<h1 id="title">Heading</h1>
<div data-block="accordion" id="component">
    <div data-block="item" data-title="Moscow">Text</div>
    <div data-block="item" data-title="Saint Petersburg" data-expanded="true">Text</div>
</div>

As an anchor, you can use the accordion content or the h1–h6 headings. For the anchor element, add the unique ID (the id attribute).

Quotes in the text

To format a quote, wrap the necessary part of the markup in the blockquote element.

<blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur, eros eu venenatis viverra, ante purus condimentum velit, rutum porttitor.</p>
</blockquote>
Copied to clipboard

Definition list

To format the definition list, use the dl, dt, dd elements.

Attention. Turbo pages don't support nested elements in the dd block.

<dl>
  <dt>Term 1</dt>
  <dd>Term 1 definition</dd>
  <dt>Term 2</dt>
  <dd>Term 2 definition</dd>
  <dt>Term 3</dt>
  <dd>Term 3 definition</dd>
</dl>
Copied to clipboard