Typography

La scala tipografica del kit — un componente invece di scegliere a mano le classi Tailwind pagina per pagina. Ogni variante renderizza per default il proprio elemento semanticamente corretto (h1 → <h1>, lead → <p>, ...); sovrascrivi con as quando serve una semantica diversa dallo stile (ad es. un <div> stilizzato come <h3> dentro l'header di una card).

import { Typography } from "@pompeitech/vesuvius-ui";

Varianti

Ogni variante

Stile senza semantica

Sovrascrivi il tag renderizzato con as quando ti serve lo stile di questa variante in un punto dove il suo elemento semantico non sarebbe HTML valido — un'etichetta con stile heading dentro un CardTitle (già di per sé un heading), per esempio:

Personalizzare il font degli heading

Gli heading (h1–h6) usano un token font-heading separato dal testo del corpo, definito una volta in base.css come --font-heading (di default è lo stesso stack del testo del corpo, quindi nulla cambia finché non lo sovrascrivi) — vedi Theming per il riferimento completo dei token:

@import url("https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap");
 
:root {
  --font-heading: "Cal Sans", var(--font-sans);
}

API

Typography

Più ogni prop nativa dell'elemento effettivamente renderizzato (un Typography variant="p" inoltra le prop di <p>, as="div" inoltra quelle di <div>, e così via).

Tag di default per variante