Hero

:::hero creates a full-width section hoisted out of the article flow and rendered edge-to-edge. The first line inside the block is the media reference; everything after it becomes overlay content.

Basic hero

:::hero
# Welcome to my site
A personal corner of the web.
:::

Hero with image

Pass a wikilink, markdown image, or bare filename as the first line to set a background image:

:::hero {image=/assets/animations/editing.gif}
# Welcome to my site
A personal corner of the web.
:::

Welcome to my site

A personal corner of the web.

Display control with pipe syntax

Use pipe syntax on the image reference to control how the image fills the hero area.

:::hero
![[/assets/animations/new folder.gif|contain top]]
:::

Overlay content

Any content after the first line becomes overlay text rendered on top of the background.

:::hero
![[/assets/animations/first time publish.gif]]
# Our work
Community theatre rooted in lived experience.
:::

Our work

Community theatre rooted in lived experience.

The picture line can be a standard Markdown image as well. A space in the file name is written %20:

:::hero
![](assets/animations/first%20time%20publish.gif)
# Our work
:::

The hero renders full-width and is hoisted out of the article content flow, so it ignores the article's content_width setting.