Pattern library

Un piccolo campionario di componenti

Ad oggi questa sezione si presenta in modo molto semplice ed essenziale: non una libreria sterminata, ma un piccolo campionamento di componenti usati di frequente nelle casistiche di tutti i giorni.

L'obiettivo è offrirti un primo approccio pratico a elementi comuni di interfaccia — come un menu, un form, una card o un indice di lettura — strutturati con un codice pulito e attento all'accessibilità.

Puoi usarli come punto di partenza da studiare, smontare e manipolare a tuo piacimento, adattandoli passo dopo passo alle necessità dei tuoi progetti. Ogni pagina include una demo interattiva, alcune note d'uso e il codice sorgente pronto da consultare.

Panoramica visuale di componenti front-end interattivi

Long-form reading

Indice di lettura

Indice con progress bar, sezione attiva e ritorno rapido all'inizio, pensato per guide e documentazione lunga.

Apri componente

Content preview

Card contenuto

Card per risorse, strumenti, articoli o template con badge, meta, CTA e stato salva accessibile.

Apri componente

Responsive navigation

Header accessibile

Header responsive con menu mobile, stato corrente, aria-expanded, focus visibile e chiusura con Escape.

Apri componente

Input experience

Form validato

Form contatto con label, errori collegati ai campi, stato loading e feedback finale annunciabile.

Apri componente