UI Kit.pdf

Embed Size (px)

Text of UI Kit.pdf

  • 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