Hero

Un hero è la prima cosa su una home page di marketing o di documentazione. Renderizza una <section> con dentro un <h1> — quindi è il titolo della pagina, non un’insegna decorativa che per caso è grande.

Hero di base

Siti statici, senza il framework

Scrivi funzioni che restituiscono HTML. Ottieni un sito completo.

hero({
  level: 2,
  title: 'Siti statici, senza il framework',
  description: 'Scrivi funzioni che restituiscono HTML. Ottieni un sito completo.',
},
  button({ size: 'lg' }, 'Inizia'),
  button({ size: 'lg', variant: 'outline', color: 'neutral' }, 'Leggi la documentazione'),
)

Con un sopratitolo

Una riga breve sopra il titolo — una versione, una categoria, un annuncio.

sitelo 2.7

Ora con una libreria di componenti

Settanta componenti, nessun runtime, uno script facoltativo.

Sfoglia i componenti

hero({
  level: 2,
  eyebrow: 'sitelo 2.7',
  title: 'Ora con una libreria di componenti',
  description: 'Settanta componenti, nessun runtime, uno script facoltativo.',
},
  button({ size: 'lg', href: '/ui' }, 'Sfoglia i componenti'),
)

Allineato a sinistra

Open source

Costruito alla luce del sole

Licenza MIT, e abbastanza piccolo da leggerlo in un pomeriggio.

Guarda su GitHub

hero({
  level: 2,
  align: 'start',
  eyebrow: 'Open source',
  title: 'Costruito alla luce del sole',
  description: 'Licenza MIT, e abbastanza piccolo da leggerlo in un pomeriggio.',
},
  button({ href: 'https://github.com/paul-browne/sitelo' }, 'Guarda su GitHub'),
)

Con un elemento multimediale

Passare media passa a due colonne non appena c’è spazio, e torna a una sola su uno schermo stretto. Si sposa naturalmente con mockup().

Guardalo in funzione

Ogni pagina è HTML statico nel momento in cui raggiunge il browser.

example.com

Ciao mondo

Renderizzato in fase di build.

hero({
  level: 2,
  align: 'start',
  title: 'Guardalo in funzione',
  description: 'Ogni pagina è HTML statico nel momento in cui raggiunge il browser.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
      text({ variant: 'h5', as: 'div' }, 'Ciao mondo'),
      text({ variant: 'small', tone: 'muted' }, 'Renderizzato in fase di build.'),
    ),
  ),
},
  button('Inizia'),
)

Dentro un contenitore

Un hero non ha un limite di larghezza proprio — mettilo in un container() così si allinea a tutto il resto della pagina.

Contenuto

Il contenitore stabilisce la larghezza; l’hero stabilisce il ritmo.

container({ size: 'md', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  hero({
    level: 2,
    title: 'Contenuto',
    description: 'Il contenitore stabilisce la larghezza; l’hero stabilisce il ritmo.',
  }),
)

Livello del titolo

Il titolo è l’<h1> della pagina per impostazione predefinita, cosa giusta per una landing page. Un hero usato a metà pagina non è il titolo della pagina, quindi abbassalo con level — lo fa ogni demo di questa pagina, visto che la pagina ha già un h1 suo.

Solo un titolo

Ogni parte è facoltativa, e niente di vuoto viene renderizzato.

Documentazione

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

Props

Prop	Tipo	Predefinito	Descrizione
`eyebrow`	`Child`	—	Riga piccola in maiuscoletto sopra il titolo.
`title`	`Child`	—	Renderizzato come h1 della pagina.
`description`	`Child`	—	La frase sotto di esso.
`media`	`Child`	—	Accanto al testo su uno schermo largo, sopra su uno stretto.
`align`	`'center' \| 'start'`	`'center'`	Allineamento del testo quando non c’è media.
`level`	`number`	`1`	Livello di intestazione del titolo. Abbassalo per un hero a metà pagina.
`as`	`string`	`'section'`	Elemento da renderizzare.

I figli diventano la riga di azioni sotto la descrizione.