Documentazione Staff

Catalogo UI e Tipografia

Sistema tipografico

huge – Titolo huge

h1 – Titolo che va a capo per vedere interlinea su titoli lunghi

Titolo h2

Titolo h3

Titolo h4

Titolo h5
Titolo h6

Paragrafo lead
Più grande del normale Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit

Paragrafo standard
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Testo small – sm

Testo xsmall – xs

Testo xxsmall – xxs

Elenco puntato

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa

Elenco check

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa

Elenco numerato

  1. Caratteristica numero 1 che risolve il problema del pubblico
  2. Caratteristica numero 2 che differenzia dalla concorrenza e mette in risalto XY
  3. Caratteristica numero 3 del prodotto

huge – Titolo huge

h1 – Titolo che va a capo per vedere interlinea su titoli lunghi

Titolo h2

Titolo h3

Titolo h4

Titolo h5
Titolo h6

Paragrafo lead
Più grande del normale Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit

Paragrafo standard
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Testo small – sm

Testo xsmall – xs

Testo xxsmall – xxs

Elenco puntato

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa

Elenco check

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa

Elenco numerato

  1. Caratteristica numero 1 che risolve il problema del pubblico
  2. Caratteristica numero 2 che differenzia dalla concorrenza e mette in risalto XY
  3. Caratteristica numero 3 del prodotto

Palette Tipografie islight / isdark

Main 700

Normal 400

Secondary 300

Success

Error

Main 700

Normal 400

Secondary 300

Success

Error

Main 700

Normal 400

Secondary 300

Success

Error

Main 700

Normal 400

Secondary 300

Success

Error

Sistema di Buttons

NOTA: I buttons qui sono creati con html per mostrare le classi necessarie per ciascun aspetto. Tutti i buttons riprodotti qui possono essere creati con il componente Action Link

Button con larghezze e padding custom

Button con dimensioni tipografie tramite classi fs-hX

Chip

Chip semplice senza icone

Chip Chip primary Chip secondary
Chip non interattiva

Chip con l’icone svg

Chip facetwp con l’icone svg

Chip con l’icone before

Palette Colori

Primary Color

Primary 700

bg-primary-700
text-primary-700

Primary

bg-primary
text-primary

Primary 300

bg-primary-300
text-primary-300

Primary 100

bg-primary-100
text-primary-100

Secondary Color

Secondary 700

bg-secondary-700
text-secondary-700

Secondary

bg-secondary
text-secondary

Secondary 300

bg-secondary-300
text-secondary-300

Secondary 100

bg-secondary-100
text-secondary-100

Accent Color

Accent 700

bg-accent-700
text-accent-700

Accent

bg-accent
text-accent

Accent 300

bg-accent-300
text-accent-300

Accent 100

bg-secondary-100
text-accent-100

Success Color

Success

bg-success
text-success

Success 300

bg-success-300
text-success-300

Success 50

bg-success-50
text-success-50

Warning Color

Warning

bg-warning
text-warning

Warning 300

bg-warning-300
text-warning-300

Warning 50

bg-warning-50
text-warning-50

Alert Color

Alert

bg-alert
text-alert

Alert 300

bg-alert-300
text-alert-300

Alert 50

bg-alert-50
text-alert-50

1

Capisci
cosa ti motiva

2

Scegli
l’esperienza

3

Entra nella
community