8/18/2019 UI Kit.pdf

1/33

Bullet List

Fusce dapibus, tellus ac cursus commodo, tortor mauriscondimentum nibh, ut fermentum massa justo sit amet risus. Crasjusto odio, dapibus ac facilisis in, egestas eget quam. Maecenas seddiam eget risus varius blandit sit amet non magna. Vestibulum idligula porta felis euismod semper. Nulla vitae elit libero, a pharetraaugue. Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus.

Fusce dapibus, tellus ac cursus commodo, tortor mauriscondimentum nibh, ut fermentum massa justo sit amet risus. Crasjusto odio, dapibus ac facilisis in, egestas eget quam. Maecenas seddiam eget risus varius blandit sit amet non magna. Vestibulum idligula porta felis euismod semper. Nulla vitae elit libero, a pharetraaugue. Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus.

Cum sociis natoque penatibus et magnis dis parturient

montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus.

Cum sociis natoque penatibus et magni dis parturientmontes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus.

Cum sociis natoque penatibus et magnis dis parturient

montes, nascetur ridiculus mus.

8/18/2019 UI Kit.pdf

2/33

Image/Text grid

Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac

facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante

venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed

consectetur. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit

libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient

montes, nascetur ridiculus mus.

Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam

venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis

dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit

amet fermentum. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient

montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient

montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus

mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat

porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Section Title

Section Title

8/18/2019 UI Kit.pdf

3/33

Image/Text grid

8/18/2019 UI Kit.pdf

4/33

Breadcrumb

Home / Section Hover / Second Level / Third Level Visited

8/18/2019 UI Kit.pdf

5/33

60 %

Progress Bar

8/18/2019 UI Kit.pdf

6/33

Chart

Lorem Ipsum: Link Lorem Ipsum: Link Lorem Ipsum: Link

Lorem Ipsum: Link Lorem Ipsum: Link

0%

25%

50%

75%

100%

Score

Period

Lorem Ipsum Dolor Sit Amet Lorem Ipsum Period 8 Dolor Sit

88.88%88.88% 88.88% 88.88%

88.88%88.88%

88.88%

88.88% 88.88%

88.88%

Period 1: January 2007 to December 2007

8/18/2019 UI Kit.pdf

7/33

8/18/2019 UI Kit.pdf

8/33

CONFIRM

CONFIRM

Active

Restored Status

Hover

Clicked

Process

Feedback

CONFIRM

CONFIRM

Process Contextual Spinner

8/18/2019 UI Kit.pdf

9/33

Tables

As we got further and further away, it diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine.

As we got further and further away, it diminished in size. Finally it shrank to the size of a marble, the most beautiful you can

imagine.As we got further and further away, it diminished in size. Finally it shrank to the size of a marble, the most beautiful you can

imagine. Finally it shrank to the size of a marble, the most beautiful you can imagine.

As we got further and further away, it diminished in size. Finally it shrank to the

size of a marble, the most beautiful you can imagine. As we got further and

further away, it diminished in size. Finally it shrank to the size of a marble, the

most beautiful you can imagine.

As we got further and further away, it diminished in size. Finally it shrank to the

size of a marble, the most beautiful you can imagine. Finally it shrank to the size

of a marble, the most beautiful you can imagine. As we got further and further

away, it diminished in size. Finally it shrank to the size of a marble.

ITALY 23%

SPAIN 12,4%

USA 88%

GERMANY

Nulla vitae elit libero, a pharetra augue.

Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.

Nullam quis risus eget urna mollis ornare vel eu leo.

94%

JAPAN 1%

Title

8/18/2019 UI Kit.pdf

10/33

Divider

As we got further and further away, it diminished in size. Finally it shrank to the size of a marble, the

most beautiful you can imagine. As we got further and further away, it diminished in size. Finally it

shrank to the size of a marble, the most beautiful you can imagine.As we got further and further away, it

diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. Finally

it shrank to the size of a marble, the most beautiful you can imagine.

As we got further and further away, it diminished in size. Finally it shrank to the size of a marble, themost beautiful you can imagine. As we got further and further away, it diminished in size. Finally it

shrank to the size of a marble, the most beautiful you can imagine.As we got further and further away, it

diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. Finally

it shrank to the size of a marble, the most beautiful you can imagine.

As we got further and further away, it diminished in

size. Finally it shrank to the size of a marble, the most

beautiful you can imagine. As we got further and

further away, it diminished in size. Finally it shrank to

the size of a marble, the most beautiful you can

imagine.As we got further and further away, it

diminished in size.

As we got further and further away, it diminished in

size. Finally it shrank to the size of a marble, the most

beautiful you can imagine. As we got further and

further away, it diminished in size. Finally it shrank to

the size of a marble, the most beautiful you can

imagine.As we got further and further away, it

diminished in size.

As we got further and further away, it diminished in

size. Finally it shrank to the size of a marble, the most

beautiful you can imagine. As we got further and

further away, it diminished in size. Finally it shrank to

the size of a marble, the most beautiful you can

imagine.As we got further and further away, it

diminished in size.

8/18/2019 UI Kit.pdf

11/33

Navigation Bar during a process

DATI INDIRIZZO RIEPILOGO PAGAMENTO

INSERISCI I TUOIDATI PERSONALI

1. 2. 3.INSERISCI IL TUOINDIRIZZO DI FATTURAZIONE

FINE

8/18/2019 UI Kit.pdf

12/33

CARICAMENTO

8/18/2019 UI Kit.pdf

13/33

DARK GRAY

Business primary color

MEDIUM GRAY

Disable

LIGHT GRAY

Background, border

BLU INFOSTRADA

Infostrada primary color

ROBIN’S EGG

Mobile primary color

RED

Error color

WIND ORANGE

Functionally interaction colorLink, call to action

Color Swatches

8/18/2019 UI Kit.pdf

14/33

Never in all their history have men been able truly to conceive of the world as one: asingle sphere, a globe, having the qualities of a globe, a round earth in which all thedirections eventually meet, in which there is no center because every point, or none, iscenter — an equal earth which all men occupy as equals. The airman's earth, if free menmake it, will be truly round: a globe in practice, not in thery.

Curious that we spend more time congratulating people who have succeeded thanencouraging people who have not.

Tab Item #3 Tab Item #4Tab Item #2Tab Item #1Active Tab

Never in all their history have men been able truly to conceive of the world as one: asingle sphere, a globe, having the qualities of a globe, a round earth in which all thedirections eventually meet, in which there is no center because every point, or none, iscenter — an equal earth which all men occupy as equals. The airman's earth, if free menmake it, will be truly round: a globe in practice, not in thery.

Curious that we spend more time congratulating people who have succeeded thanencouraging people who have not.

Tab Item #3Tab Item #2 Tab Item #2Tab Item #1Active Tab

Tab

8/18/2019 UI Kit.pdf

15/33

Collapsible Group Item 3

Collapsible Group Item 3

Collapsible Group Item 1

Collapsible Group Item 3

Collapsible Group Item 3

Collapsible Group Item 1

Never in all their history have men been able truly to conceive of the world as one: asingle sphere, a globe, having the qualities of a globe, a round earth in which all the

directions eventually meet, in which there is no center because every point, or none, iscenter — an equal earth which all men occupy as equals. The airman's earth, if free menmake it, will be truly round: a globe in practice, not in thery.

As we got further and further away, it diminished in size. Finally it shrank to the size of a marble, the

most beautiful you can imagine. As we got further and further away, it diminished in size. Finally it

shrank to the size of a marble, the most beautiful you can imagine.As we got further and further away, it

diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. Finally

it shrank to the size of a marble, the most beautiful you can imagine.

Accordion

8/18/2019 UI Kit.pdf

16/33

1

Spinner

1

1- +

8/18/2019 UI Kit.pdf

17/33

Tooltip

8/18/2019 UI Kit.pdf

18/33

Questo è un link hover

Questo è un link

Chose the date

Chose the date

Link

8/18/2019 UI Kit.pdf

19/33

PREV VAI1 2 3 4 5

Pagination

1 99

1 2 3 4 5

8/18/2019 UI Kit.pdf

20/33

8/18/2019 UI Kit.pdf

21/33

Header 1 Trade Gothic Bold No. 2 size 50 Header 2 Trade Gothic Bold No. 2 size 40

Header 3 Trade Gothic Bold No. 2 size 30

Header 4 Trade Gothic Bold No. 2 size 20

Header 5 Trade Gothic Bold No. 2 size 18

Header 6 Trade Gothic Regular size 16

Paragraph Questo testo è scritto utilizzando il font Trade Gothic regular size 14l'interlinea utilizzata per questo testo è di 18 px. Questa è una prova di testo obliquo.

Prices 1324,99 €149,99 € 149,99 €0,24 €

Typography

8/18/2019 UI Kit.pdf

22/33

Scrollbar

8/18/2019 UI Kit.pdf

23/33

Carousel

8/18/2019 UI Kit.pdf

24/33

INVIA

Form di contatto

8/18/2019 UI Kit.pdf

25/33

LOGIN

Form

Recupero credenziali

Salva dati di accesso

Form

8/18/2019 UI Kit.pdf

26/33

Chose the date

Calendar

8/18/2019 UI Kit.pdf

27/33

Input text

8/18/2019 UI Kit.pdf

28/33

Brazil

Germany

China

Italy

Select Country

Selection

8/18/2019 UI Kit.pdf

29/33

NORMALNORMAL GHOST

NORMAL

DISABLE

NORMAL HOVER PRESSEDNORMAL GHOST

PRESSED

DISABLE

Button

8/18/2019 UI Kit.pdf

30/33

10 42 48 50

Video Player

8/18/2019 UI Kit.pdf

31/33

ANNULLA CONFERMA

Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nuncsollicitudin ultrices. Donec euismod scelerisque ligula. Maecenas eu varius risus, eu aliquet arcu. Curabitur fermentum suscipit est, tincidunt mattis loremluctus id. Done.

8/18/2019 UI Kit.pdf

32/33

Questo testo è scritto utilizzando il font Trade Gothic regular size 14, l'interlinea utilizzata

per questo testo è di 18 px. Questa è una prova di teto obliquo. Questo testo è scrittoutilizzando il font Trade Gothic regular size 14, l'interlinea utilizzata pe r questo testo è di 18px. Questa è una prova di teto obliquo.

ANNULLA CONFERMA

Trade Gothic Bold No. 2 size 40

8/18/2019 UI Kit.pdf

33/33

Questo testo è scritto utilizzando il font Trade Gothic regular size 14, l'interlinea utilizzataper questo testo è di 18 px. Questa è una prova di teto obliquo. Questo testo è scrittoutilizzando il font Trade Gothic regular size 14, l'interlinea utilizzata per questo testo è di18 px. Questa è una prova di teto obliquo.Questo testo è scritto utilizzando il font TradeGothic regular size 14, l'interlinea utilizzata per questo testo è di 18 px. Questa è unaprova di teto obliquo.

Titolo box Alert

ANNULLA CONFERMAANNULLA CONFERMA

Questo testo è scritto utilizzando il font Trade Gothic regular size 14, l'interlinea utilizzataper questo testo è di 18 px. Questa è una prova di teto obliquo. Questo testo è scrittoutilizzando il font Trade Gothic regular size 14, l'interlinea utilizzata per questo testo è di18 px. Questa è una prova di teto obliquo.Questo testo è scritto utilizzando il font TradeGothic regular size 14, l'interlinea utilizzata per questo testo è di 18 px. Questa è unaprova di teto obliquo.

Titolo box

ANNULLA CONFERMA

Alert Box