---
title: Heroes
url: 'https://groovy.simplo.dev/guider/heroes'
updated: '2026-10-30'
description: 'En banner överst på sidan eller nere i texten, med färdiga bakgrunder eller en egen bild.'
---

# Heroes

En banner överst på sidan eller nere i texten, med färdiga bakgrunder eller en egen bild.

Den här sidans hero ligger i sidans frontmatter (`hero:`) och bär sidans titel och beskrivning. Den ställs in under *Page settings* i redigeringsläget.

## I texten

En hero i texten skrivs som en callout av typen `HERO`. I editorn är det blocket *Hero*.

## Kom igång på fem minuter

Installera temat, skapa din första sida och publicera.

[Läs guiden](https://groovy.simplo.dev/komma-igang)

Med en egen bild ur sidans mapp, hög och centrerad:

## Egen bild som bakgrund

En mörk ton läggs över bilden så att texten går att läsa.

Mörk text, accentfärgad stor knapp och kontur:

## Prova själv

[Öppna editorn](https://groovy.simplo.dev/guider/skriva-sidor)

## Konturknapp

[Läs mer](https://groovy.simplo.dev/referens)

Egen färg (`#5c3d2e`), textfärgen följer:

## Egen färg

Skriv `#rrggbb` som ord, eller välj i färgväljaren.

Sajtens egna heroes `brand` (en gradient) och `skyline` (bakgrund, bild och ton), ur temainställningarna → Content — heroes:

## Sajtens egen gradient

Bakgrunden `brand` kommer ur temainställningarna.

## Sajtens egen bild

Bild, ton och textfärg följer med namnet `skyline`; höjden är sidans.

## sand

Kompakt, i en ljus färg:

## Nyheter i version 2

Tre saker som är värda att känna till.

## Alla bakgrunder

## gray

## blue

## teal

## yellow

## pink

## ink

## indigo

## ocean

## twilight

## berry

## ember

## forest

## night

## dawn

## mist

## mint

---

## Navigation

- Parent: [Guider](https://groovy.simplo.dev/guider.md)
- Previous: [Sök](https://groovy.simplo.dev/guider/sok.md)
- Next: [Office-filer](https://groovy.simplo.dev/guider/office-filer.md)