Block types

The Kirby Editor comes with a set of default block types to create rich content.

Code

A code block can be used to add code examples to your document, which will be rendered in a HTML code block:

<pre><code>Your code</code></pre>

Attributes

language

The selected code language. This will automatically be added as CSS class to the code element and can be used for syntax highlighting for example.

<pre><code class="language-php">Your code</code></pre>

Heading 1

<h1 id="your-headline">Your headline</h1>

Heading 2

<h2>Your headline</h2>

Heading 3

<h3>Your headline</h3>

Image

<figure>
  <img src="https://example.com/image.jpg" alt="Alt text">
  <figcaption>
    This is a nice image
  <figcaption>
</figure>

Attributes

alt

The entered alternative text, if available

caption

The entered caption text, if available

css

CSS class name, which can be used to add a custom selector to the wrapping figure element (i.e. for special layout)

guid

A global unique ID for the image, which is used to find the matching File object in Kirby.

ratio

The ratio of the image is used in the editor to create a wrapping placeholder container. The same can be done in the snippet to build more robust responsive images.

src

The absolute URL of the image

KirbyText

The KirbyText block can be used to enter Markdown, KirbyText and/or HTML for more flexibility, when the other block types are not enough. The result will be rendered with the KirbyText parser.

<!-- Your custom markdown -->

Line

<hr>

Numbered List

<ol>
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ol>

Unordered List

<ul>
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ul>

Quote

<blockquote>
  Inspiring quote
</blockquote>

Text

<p>Your text</p>

Video

<figure>
  <iframe src="https://youtube.com/embed/1234"></iframe>  
</figure>

Attributes

src

The Video URL. This can be used in Kirby's video() helper to create the embedding iframe.