Hero

:::hero creates a full-width section that is 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
# 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.

:::grid 2 {.sc-demo}
```markdown
:::hero {image=assets/portrait1.png}
# 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
![[mountains.jpg|contain top]]

+++
::::hero
![[mountains.jpg|contain top]]
::::
:::

## Overlay content

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

:::grid 2 {.sc-demo}
```markdown
:::hero
![[panorama.jpg]]
# Our work
Community theatre rooted in lived experience.
:::

+++

Our work

Community theatre rooted in lived experience.

:::

The hero renders full-width and is hoisted out of the article content flow — it is not constrained by the article's content_width setting.