Hero

Hero to pierwsza rzecz na stronie marketingowej albo na stronie głównej dokumentacji. Renderuje <section> z <h1> w środku — więc jest nagłówkiem strony, a nie ozdobnym banerem, który akurat jest duży.

Podstawowy hero

Strony statyczne, bez frameworka

Pisz funkcje zwracające HTML. Dostajesz kompletną witrynę.

hero({
  level: 2,
  title: 'Strony statyczne, bez frameworka',
  description: 'Pisz funkcje zwracające HTML. Dostajesz kompletną witrynę.',
},
  button({ size: 'lg' }, 'Zacznij'),
  button({ size: 'lg', variant: 'outline', color: 'neutral' }, 'Przeczytaj dokumentację'),
)

Z nadtytułem

Krótki wiersz nad tytułem — wersja, kategoria, ogłoszenie.

sitelo 2.7

Teraz z biblioteką komponentów

Siedemdziesiąt komponentów, bez runtime’u, jeden opcjonalny skrypt.

Przejrzyj komponenty

hero({
  level: 2,
  eyebrow: 'sitelo 2.7',
  title: 'Teraz z biblioteką komponentów',
  description: 'Siedemdziesiąt komponentów, bez runtime’u, jeden opcjonalny skrypt.',
},
  button({ size: 'lg', href: '/ui' }, 'Przejrzyj komponenty'),
)

Wyrównany do lewej

Open source

Budowane na widoku

Licencja MIT i na tyle małe, że przeczytasz w jedno popołudnie.

Zobacz na GitHubie

hero({
  level: 2,
  align: 'start',
  eyebrow: 'Open source',
  title: 'Budowane na widoku',
  description: 'Licencja MIT i na tyle małe, że przeczytasz w jedno popołudnie.',
},
  button({ href: 'https://github.com/paul-browne/sitelo' }, 'Zobacz na GitHubie'),
)

Z materiałem

Podanie media przełącza na dwie kolumny, gdy tylko jest na nie miejsce, i wraca do jednej na wąskim ekranie. Naturalnie łączy się z mockup().

Zobacz to w działaniu

Każda strona jest statycznym HTML-em, zanim dotrze do przeglądarki.

example.com

Witaj świecie

Wyrenderowane podczas buildu.

hero({
  level: 2,
  align: 'start',
  title: 'Zobacz to w działaniu',
  description: 'Każda strona jest statycznym HTML-em, zanim dotrze do przeglądarki.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
      text({ variant: 'h5', as: 'div' }, 'Witaj świecie'),
      text({ variant: 'small', tone: 'muted' }, 'Wyrenderowane podczas buildu.'),
    ),
  ),
},
  button('Zacznij'),
)

Wewnątrz kontenera

Hero nie ma własnego limitu szerokości — umieść go w container(), żeby ustawił się w linii z resztą strony.

W kontenerze

Kontener ustala szerokość; hero ustala rytm.

container({ size: 'md', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  hero({
    level: 2,
    title: 'W kontenerze',
    description: 'Kontener ustala szerokość; hero ustala rytm.',
  }),
)

Poziom nagłówka

Tytuł jest domyślnie elementem <h1> strony, co jest właściwe dla strony docelowej. Hero użyty w środku strony nie jest jej nagłówkiem, więc obniż go przez level — robi tak każde demo na tej stronie, bo strona ma już własny h1.

Sam tytuł

Każda część jest opcjonalna i nic pustego się nie renderuje.

Dokumentacja

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

Propsy

Prop	Typ	Domyślnie	Opis
`eyebrow`	`Child`	—	Mały wiersz wersalikami nad tytułem.
`title`	`Child`	—	Renderowany jako h1 strony.
`description`	`Child`	—	Zdanie pod nim.
`media`	`Child`	—	Obok tekstu na szerokim ekranie, nad nim na wąskim.
`align`	`'center' \| 'start'`	`'center'`	Wyrównanie tekstu, gdy nie ma materiału.
`level`	`number`	`1`	Poziom nagłówka tytułu. Obniż go dla hero w środku strony.
`as`	`string`	`'section'`	Element do wyrenderowania.

Dzieci stają się rzędem akcji pod opisem.