heading

Preview

Default files

Snippet

By default, Kirby uses the following snippet to render the heading block:

<?php
/** @var \Kirby\Cms\Block $block */
$level = $block->level()->value();

// ensure a valid heading tag
if (in_array($level, ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], true) === false) {
    $level = 'h2';
}
?>
<<?= $level ?>><?= $block->text() ?></<?= $level ?>>

To overwrite this default snippet, place your custom file in /site/snippets/blocks/heading.php.

Blueprint

By default, Kirby uses the following blueprint for the heading block:

name: field.blocks.heading.name
icon: title
wysiwyg: true
preview: heading
fields:
  level:
    label: field.blocks.heading.level
    type: toggles
    empty: false
    default: "h2"
    labels: false
    options:
      - value: h1
        icon: h1
        text: H1
      - value: h2
        icon: h2
        text: H2
      - value: h3
        icon: h3
        text: H3
      - value: h4
        icon: h4
        text: H4
      - value: h5
        icon: h5
        text: H5
      - value: h6
        icon: h6
        text: H6
  text:
    label: field.blocks.heading.text
    type: writer
    inline: true
    placeholder: field.blocks.heading.placeholder

To overwrite this default blueprint, place your custom file in /site/blueprints/blocks/heading.yml.

Vue component

kirby/src/components/Forms/Blocks/Types/Heading.vue