---
title: "Feature: Layouts and an eyebrow for the heroes"
manual: "Frontend Theme for Extension Development"
version: "main"
source: "Changelog/2.0/Feature-HeroLayouts.rst"
modified: "2026-09-17T04:52:50+00:00"
---

# Feature: Layouts and an eyebrow for the heroes

## Description

The three hero content elements - **Hero**, **Hero, small**
and **Hero, text only** \- have two new fields above their header.

**Eyebrow** is a short label above the title, such as a category or a
date.

**Layout** arranges the text and the image:

| Layout | Renders | Offered on |
| --- | --- | --- |
| **Image beside the text, at the start** | The hero as before. The default. | All three |
| **Image beside the text, at the end** | The image at the end of the row on a wide screen. | Hero; hero, small |
| **Centred** | Title, text, links and image centred. | All three |
| **Screenshot** | Centred, with the image below the text, cut off by the bottom edge of the hero - for a screenshot of an application. | Hero |
| **Cropped** | The image at the end of the row, cut off by the end and the bottom edges of the hero. | Hero |

A layout that arranges an image renders like the default without one;
**Screenshot** renders centred.

## Impact

Existing heroes keep their look: the default layout is the one they always
had. The layouts are the modifiers `--image-end`, `--centred`,
`--screenshot` and `--bordered` of `.theme-hero`, and the
eyebrow is `<p class="theme-hero__eyebrow">` before the title.

A site package can remove layouts per hero in page TSconfig, for example
`TCEFORM.tt_content.tx_theme_hero_layout.types.theme_hero.removeItems = bordered`.