Hero

Ein Hero ist das Erste auf einer Marketing- oder Dokumentations-Startseite. Er rendert eine <section> mit einem <h1> darin — er ist also die Überschrift der Seite, kein dekoratives Banner, das zufällig groß ist.

Einfacher Hero

Statische Seiten, ohne das Framework

Schreibe Funktionen, die HTML zurückgeben. Bekomme eine vollständige Website.

hero({
  level: 2,
  title: 'Statische Seiten, ohne das Framework',
  description: 'Schreibe Funktionen, die HTML zurückgeben. Bekomme eine vollständige Website.',
},
  button({ size: 'lg' }, 'Loslegen'),
  button({ size: 'lg', variant: 'outline', color: 'neutral' }, 'Doku lesen'),
)

Mit Überzeile

Eine kurze Zeile über dem Titel — eine Version, eine Kategorie, eine Ankündigung.

sitelo 2.7

Jetzt mit Komponentenbibliothek

Siebzig Komponenten, kein Runtime, ein optionales Skript.

Komponenten durchstöbern

hero({
  level: 2,
  eyebrow: 'sitelo 2.7',
  title: 'Jetzt mit Komponentenbibliothek',
  description: 'Siebzig Komponenten, kein Runtime, ein optionales Skript.',
},
  button({ size: 'lg', href: '/de/ui' }, 'Komponenten durchstöbern'),
)

Linksbündig

Open Source

Offen gebaut

MIT-lizenziert und klein genug, um es an einem Nachmittag zu lesen.

Auf GitHub ansehen

hero({
  level: 2,
  align: 'start',
  eyebrow: 'Open Source',
  title: 'Offen gebaut',
  description: 'MIT-lizenziert und klein genug, um es an einem Nachmittag zu lesen.',
},
  button({ href: 'https://github.com/paul-browne/sitelo' }, 'Auf GitHub ansehen'),
)

Mit Medien

media zu übergeben schaltet auf zwei Spalten um, sobald Platz dafür ist, und stapelt auf schmalem Bildschirm wieder zu einer. Das passt natürlich zu mockup().

Sieh es laufen

Jede Seite ist statisches HTML, sobald sie den Browser erreicht.

example.com

Hallo Welt

Zur Build-Zeit gerendert.

hero({
  level: 2,
  align: 'start',
  title: 'Sieh es laufen',
  description: 'Jede Seite ist statisches HTML, sobald sie den Browser erreicht.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
      text({ variant: 'h5', as: 'div' }, 'Hallo Welt'),
      text({ variant: 'small', tone: 'muted' }, 'Zur Build-Zeit gerendert.'),
    ),
  ),
},
  button('Loslegen'),
)

In einem Container

Ein Hero hat keine eigene Breitengrenze — setze ihn in einen container(), damit er sich an allem anderen auf der Seite ausrichtet.

Eingefasst

Der Container setzt die Breite; der Hero setzt den Rhythmus.

container({ size: 'md', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  hero({
    level: 2,
    title: 'Eingefasst',
    description: 'Der Container setzt die Breite; der Hero setzt den Rhythmus.',
  }),
)

Überschriftenebene

Der Titel ist standardmäßig das <h1> der Seite, was für eine Landing-Page richtig ist. Ein Hero mitten auf einer Seite ist nicht die Seitenüberschrift, also senke ihn mit level — jede Demo auf dieser Seite tut das, weil die Seite bereits ein eigenes h1 hat.

Nur ein Titel

Jeder Teil ist optional, und nichts Leeres wird gerendert.

Dokumentation

hero({ level: 2, title: 'Dokumentation' })

Props

Prop	Typ	Standard	Beschreibung
`eyebrow`	`Child`	—	Kleine Zeile in Großbuchstaben über dem Titel.
`title`	`Child`	—	Wird als h1 der Seite gerendert.
`description`	`Child`	—	Der Satz darunter.
`media`	`Child`	—	Neben dem Text auf breitem Bildschirm, darüber auf schmalem.
`align`	`'center' \| 'start'`	`'center'`	Textausrichtung, wenn es keine Medien gibt.
`level`	`number`	`1`	Überschriftenebene des Titels. Für einen Hero mitten auf der Seite absenken.
`as`	`string`	`'section'`	Element, das gerendert wird.

Kinder werden zur Aktionsreihe unter der Beschreibung.