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
- Caratteristica numero 1 che risolve il problema del pubblico
- Caratteristica numero 2 che differenzia dalla concorrenza e mette in risalto XY
- 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
- Caratteristica numero 1 che risolve il problema del pubblico
- Caratteristica numero 2 che differenzia dalla concorrenza e mette in risalto XY
- 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
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