Team System — UI Kit

Components

Bottoni, link, badge, card, liste e quote: gli elementi pronti all'uso costruiti sui token di Foundations.

Bottoni

Varianti primaria e secondaria, con stile outline, tre dimensioni e stato disabled.

Primary
.btn-pri
Secondary
.btn-sec
Primary outline
.btn-pri.btn-out
Secondary outline
.btn-sec.btn-out
Dimensioni
.btn-sm / (default) / .btn-lg
Disabled
[disabled]
Su sfondo scuro (invert)
.invert .btn-*

Badge

Etichette pillola per stati o evidenze. 5 colori (Primary, Secondary, Red, Yellow, Green), variante outline e 2 taglie extra oltre al default.

Primary
.badge-pri
Novità
Secondary
.badge-sec
Più venduto
Red
.badge-red
Bloccato
Yellow
.badge-yellow
Da fare
Green
.badge-green
Completato
Badge con icona
.badge-pri > i
Con icona

Variante outline — .badge-out

.badge-out.badge-pri
Primary
.badge-out.badge-sec
Secondary
.badge-out.badge-red
Red
.badge-out.badge-yellow
Yellow
.badge-out.badge-green
Green

Taglie

.badge-sm
Small
.badge-pri
Default
.badge-lg
Large

Card

Superfici colorate o outline in diverse tinte semantiche, con raggio opzionale.

Card Primary
.card-pri
Card Secondary
.card-sec
Card Neutral
.card-neutral
Card Sunken
.card-sunken
Card Subtler
.card-subtler
Card Primary outline
.card-pri-out
Card Secondary outline
.card-sec-out
Card Neutral outline
.card-neutral-out

Liste

Elenchi puntati con icona (check, check-circle, chevron, tag) e liste inline "list-item".

Items list · check
.items-list.icon-check.icon-pri
  • Voce con check primario
  • Seconda voce
  • Terza voce
Items list · check-circle
.items-list.icon-check-circle.icon-sec
  • Voce con check-circle
  • Seconda voce
  • Terza voce
Items list · chevron-right
.items-list.icon-chevron-right
  • Voce con chevron
  • Seconda voce
Items list · tag (2026-07-20)
.items-list.icon-tag.icon-sec
  • Voce con tag
  • Seconda voce
List item
.list-item
Elemento singolo inline

Quote

Citazioni con bordo sinistro colorato, in varianti semantiche.

"Un prodotto che ha semplificato tutta la nostra fatturazione."
— quote-pri
"Il supporto clienti è stato eccezionale fin dal primo giorno."
— quote-sec
"Semplice da usare fin da subito, senza bisogno di formazione."
— quote-strongest
"Un supporto sempre presente, anche nei momenti di maggior carico."
— quote-neutral
"Ci ha permesso di ridurre drasticamente i tempi di gestione."
— quote-sunken
"La scelta migliore che potessimo fare per il nostro team."
— quote-subtler

Icon expand

.icon-expand sovrappone un pulsante circolare "espandi" a un contenitore posizionato — tipicamente un'immagine dentro un contenitore .ratio-*, per un'anteprima cliccabile a schermo intero. Va combinata con .left o .right per l'offset orizzontale; passa il mouse per vedere l'effetto ingrandimento.

Ancorata a destra (.right) e a sinistra (.left)
.ratio-16_9.icon-expand.right · .ratio-4_3.icon-expand.left
Anteprima immagine
Anteprima immagine