Tipografia

text() renderizza un pezzo di testo in una delle dimensioni della libreria. La variante sceglie un elemento sensato — variant: 'h2' renderizza un vero <h2> — così le intestazioni finiscono nella struttura del documento senza che nessuno debba pensarci.

Varianti

Intestazione 1

Intestazione 2

Intestazione 3

Intestazione 4

Intestazione 5

Intestazione 6

Lead — un gradino sopra il testo corrente, per la frase sotto un titolo.

Body — quello predefinito.

Small — didascalie che sono ancora frasi.

Caption — le note in piccolo.Overline

stack({ gap: 'sm' },
  text({ variant: 'h1' }, 'Intestazione 1'),
  text({ variant: 'h2' }, 'Intestazione 2'),
  text({ variant: 'h3' }, 'Intestazione 3'),
  text({ variant: 'h4' }, 'Intestazione 4'),
  text({ variant: 'h5' }, 'Intestazione 5'),
  text({ variant: 'h6' }, 'Intestazione 6'),
  text({ variant: 'lead' }, 'Lead — un gradino sopra il testo corrente, per la frase sotto un titolo.'),
  text({ variant: 'body' }, 'Body — quello predefinito.'),
  text({ variant: 'small' }, 'Small — didascalie che sono ancora frasi.'),
  text({ variant: 'caption' }, 'Caption — le note in piccolo.'),
  text({ variant: 'overline' }, 'Overline'),
)

Intestazioni

heading() prende un level della struttura e si dimensiona di conseguenza. size separa le due cose: un <h1> che sembra un h3 resta comunque un h1 per uno screen reader.

Un’intestazione di livello 2, dimensionata di conseguenza

Un’intestazione di livello 2, dimensionata come un h5

stack({ gap: 'sm' },
  heading({ level: 2 }, 'Un’intestazione di livello 2, dimensionata di conseguenza'),
  heading({ level: 2, size: 'h5' }, 'Un’intestazione di livello 2, dimensionata come un h5'),
)

Tono

Tre pesi di enfasi, dal contrasto pieno fino al grigio leggibile più sommesso.

Predefinito — il colore con cui è composto il testo corrente.

Attenuato — testo secondario, ancora comodamente leggibile.

Discreto — etichette e metadati.

stack({ gap: 'xs' },
  text('Predefinito — il colore con cui è composto il testo corrente.'),
  text({ tone: 'muted' }, 'Attenuato — testo secondario, ancora comodamente leggibile.'),
  text({ tone: 'subtle' }, 'Discreto — etichette e metadati.'),
)

Allineamento

Inizio

Centro

Fine

stack({ gap: 'xs' },
  text({ align: 'start' }, 'Inizio'),
  text({ align: 'center' }, 'Centro'),
  text({ align: 'end' }, 'Fine'),
)

Troncare e limitare

truncate taglia una singola riga con dei puntini di sospensione. lines limita invece a un numero di righe, che è ciò che di solito vuole il riassunto di una scheda.

Una sola riga che continua ben oltre la larghezza del suo contenitore e viene tagliata con dei puntini di sospensione invece di andare a capo.

Limitato a due righe. Questo paragrafo va avanti per un po’ così che ci sia davvero qualcosa da tagliare, e poi continua ancora un altro pezzo, oltre il punto in cui sarebbe iniziata la terza riga.

stack({ gap: 'md' },
  card({ variant: 'flat' }, cardBody(
    text({ truncate: true }, 'Una sola riga che continua ben oltre la larghezza del suo contenitore e viene tagliata con dei puntini di sospensione invece di andare a capo.'),
  )),
  card({ variant: 'flat' }, cardBody(
    text({ lines: 2, tone: 'muted' }, 'Limitato a due righe. Questo paragrafo va avanti per un po’ così che ci sia davvero qualcosa da tagliare, e poi continua ancora un altro pezzo, oltre il punto in cui sarebbe iniziata la terza riga.'),
  )),
)

Codice inline e tasti

Esegui sitelo build oppure premi ⌘ K per cercare.

text(
  'Esegui ', code('sitelo build'), ' oppure premi ', kbd('⌘'), ' ', kbd('K'), ' per cercare.',
)

I figli vengono renderizzati come HTML — è questo che fa funzionare l’annidamento ovunque in questa libreria, e code() non fa eccezione. Quindi un esempio che contiene tag ha bisogno della prop text, che li sfugge:

<em>Ciao</em> — text: mostrato come scritto

Ciao — figli: interpretati come markup

stack({ gap: 'sm' },
  text(code({ text: '<em>Ciao</em>' }), ' — text: mostrato come scritto'),
  text(code('<em>Ciao</em>'), ' — figli: interpretati come markup'),
)

Servono entrambi. text è per un esempio di codice, dove un tag va letto invece che costruito. I figli sono per output già evidenziato sintatticamente, dove il markup è il punto — il risultato di Prism o Shiki ci entra direttamente.

sitelo build --root docs

sitelo build

stack({ gap: 'sm' },
  text(code({ text: 'sitelo build --root docs' })),
  text(code('<span style="color: var(--su-primary-soft-fg)">sitelo</span> build')),
)

Comporre

Text accetta figli, non solo una stringa — quindi link, codice ed enfasi si annidano al suo interno come farebbero in HTML.

Le pagine sono funzioni che restituiscono HTML. Vedi la guida su come scrivere pagine.

text({ variant: 'lead' },
  'Le pagine sono funzioni che restituiscono ',
  code('HTML'),
  '. Vedi la guida su ',
  link({ href: '/docs/pages' }, 'come scrivere pagine'),
  '.',
)

Cambiare l’elemento

as scavalca l’elemento senza cambiare l’aspetto — per un’intestazione visiva che non deve comparire nella struttura, o per uno <span> dentro una riga di testo.

Sembra un’intestazione, è un div

Stile caption su un paragrafo

stack({ gap: 'xs' },
  text({ variant: 'h4', as: 'div' }, 'Sembra un’intestazione, è un div'),
  text({ variant: 'caption', as: 'p' }, 'Stile caption su un paragrafo'),
)

Nascosto visivamente

visuallyHidden() tiene il contenuto nell’albero di accessibilità ma fuori dallo schermo — l’etichetta di cui ha bisogno uno screen reader là dove chi vede la ricava dal contesto.

Stato della build: superata — l’ultima build è riuscita 4 minuti fa

text(
  'Stato della build: ',
  chip({ color: 'success', dot: true }, 'superata'),
  visuallyHidden(' — l’ultima build è riuscita 4 minuti fa'),
)

Props

Prop	Tipo	Predefinito	Descrizione
`variant`	`'h1'…'h6' \| 'lead' \| 'body' \| 'small' \| 'caption' \| 'overline'`	`'body'`	Dimensione, peso ed elemento predefinito.
`tone`	`'default' \| 'muted' \| 'subtle'`	`'default'`	Quanto contrasto porta il testo.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Allineamento del testo.
`truncate`	`boolean`	`false`	Una riga, tagliata con i puntini di sospensione.
`lines`	`number`	—	Limita a questo numero di righe.
`as`	`string`	—	Scavalca l’elemento che la variante sceglierebbe.

heading() accetta level (1–6) e una size facoltativa; il resto è identico.