Front-page blocks
Expressive blocks for the home page — generous and eye-catching (scope home). button is available everywhere.
hero
The lead: a large, centred headline with a subtitle and calls to action. Nested button blocks become actions.
| Attribute | Values | Effect |
|---|---|---|
headline | text | large headline |
sub | text | subtitle (optional) |
child: button | calls to action | |
hero
headline: Das Reisemagazin
sub: Langsame Geschichten aus nahen und fernen Orten — sorgfältig erzählt und fotografiert.
button variant=primary
label: Aktuelle Ausgabe
href: #
button variant=ghost
label: Themen
href: #Result ↓
Das Reisemagazin
Langsame Geschichten aus nahen und fernen Orten — sorgfältig erzählt und fotografiert.
button · action
A button (both names are identical). The variant sets the look: primary is filled, ghost is outlined only.
| Attribute | Values | Effect |
|---|---|---|
variant | primary · ghost | filled or outlined (default primary) |
label | text | caption |
href | URL | target link |
button variant=primary label="Jetzt lesen" href=#
button variant=ghost label="Mehr erfahren" href=#Result ↓
features · feature
A grid of short features. features sets the column count; each feature is a tile.
| Attribute | Values | Effect |
|---|---|---|
cols (features) | 1–4 (default 3) | column count (single column below 720px) |
title (feature) | text | tile title |
text (feature) | text | description |
features cols=3
feature
title: Reportagen
text: Ausführliche Geschichten mit Zeit zum Erzählen.
feature
title: Fotostrecken
text: Bilder, die einen Ort spürbar machen.
feature
title: Service
text: Konkrete Tipps für die eigene Reise.Result ↓
Reportagen
Ausführliche Geschichten mit Zeit zum Erzählen.
Fotostrecken
Bilder, die einen Ort spürbar machen.
Service
Konkrete Tipps für die eigene Reise.
cta
A highlighted call-to-action box with a title, a subtitle and buttons.
| Attribute | Values | Effect |
|---|---|---|
title | text | heading of the box |
sub | text | subtitle |
child: button | calls to action | |
cta
title: Keine Ausgabe verpassen
sub: Der Newsletter fasst die besten Geschichten des Monats zusammen.
button variant=primary
label: Abonnieren
href: #Result ↓