Organizzazione Componenti

Come è organizzata la web UI

La sidebar di Fractal Core è divisa in sezioni autonome, ognuna dedicata a un livello del design system. La distinzione principale è tra i pattern generici (riusabili su qualsiasi prodotto digitale RT) e i componenti specifici del Portale Istituzionale di Regione Toscana.


Sezioni del design system generico

Design System

I fondamentali visivi: colori, tipografia, spaziature e utilità. Questa sezione non contiene componenti navigabili ma definisce il vocabolario visivo condiviso da tutto il resto. Consultarla per verificare i token disponibili prima di personalizzare un componente.

Atoms

I mattoni fondamentali dell’interfaccia — elementi autonomi che non si scompongono ulteriormente. Qui si trovano: bottoni, icone, campi di input, select, chip, badge, link. Sono i componenti più granulari e più riutilizzati nelle composizioni.

Molecules

Composizioni di atoms che formano un’unità funzionale riconoscibile. Esempi: card, accordion, campo di input con label ed errore, select con etichetta, paginazione. Si trovano qui i pattern da assemblare nelle sezioni di pagina.

Organisms

Componenti complessi generici, strutturalmente riusabili su prodotti diversi dal Portale RT. Includono header, footer, carousel, gallery, modal, tablist, navigazione laterale. La sezione contiene anche i page-header strutturali generici (base, with-cover) e le sezioni riusabili come filtri, search-box, griglia a 2 colonne.

Templates

Layout di pagina riusabili, senza contenuto specifico: colonna singola, con sidebar sinistra, con sidebar destra, con layout ricerca. Sono le strutture su cui poggiano le pagine complete.

Others

Componenti che non rientrano nelle categorie dell’atomic design. Attualmente: il banner di onboarding.


Portale Istituzionale

Questa sezione raccoglie i componenti pensati specificamente per il Portale Istituzionale di Regione Toscana — non sono pattern generici ma esempi concreti dell’implementazione RT.

È organizzata internamente in quattro gruppi:

Gruppo Cosa contiene
Page Headers Header di pagina per articoli, bandi, corsi, servizi, temi
Sections Sezioni di contenuto: notizie, aggiornamenti, eventi, guide, campagne, meteo, servizi…
Pages Pagine complete del Portale: home, tema, evento, bando, servizio, persona, guida…
Organisms Organismi RT-specifici, come il banner CTA servizio

Quando usare questa sezione

Usala come riferimento visivo dell’implementazione effettiva del Portale — per capire come i pattern generici vengono composti in pagine reali, o per verificare il rendering di una pagina specifica prima di apportare modifiche.

Se stai cercando un pattern da riusare in un altro prodotto RT, cerca prima nelle sezioni generiche (Design System → Others). Se lo trovi solo qui, valuta se estrarlo come pattern generico.


Come orientarsi rapidamente

Sto cercando… Dove guardare
Un token colore, una classe tipografica Design System
Un bottone, un’icona, un input Atoms
Una card, un accordion, una paginazione Molecules
Un header, un footer, una gallery Organisms
Un layout di pagina a colonne Templates
Una pagina completa del Portale RT Portale Istituzionale → Pages
Una sezione di contenuto RT (notizie, eventi…) Portale Istituzionale → Sections
Un widget o componente applicativo Fractal Servizi →

La barra di ricerca in cima alla sidebar permette di trovare qualsiasi componente per nome senza navigare la gerarchia.


Fractal Servizi

I widget e i componenti applicativi per i servizi digitali (Widgets, Servizi) non appaiono in questa istanza — sono documentati nell’istanza separata Fractal Servizi. La sezione Portale Istituzionale non compare nel Fractal Servizi.

Apri Fractal Servizi →