| A | B | C | D | E | F | G | H | I | J | R | S | T | U | V | W | X | Y | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | designers.italia.it - Elenco dei componenti e roadmap dei Kit per la User Interface | |||||||||||||||||
2 | Stile | Componenti | Varianti | I componenti sono già presenti nei kit? | Roadmap react toolkit | Roadmap bootstrap4 toolkit | ||||||||||||
3 | States | ui kit | web toolkit | react | bootstrap4 | angular | 01/18 | 02/18 | 03/18 | 04/18 | 01/18 | 02/18 | 03/18 | 04/18 | ||||
4 | COLOR_SYSTEM | brand colors | light - dark background | • | • | |||||||||||||
5 | tints-shadows/tones | • | ||||||||||||||||
6 | neutral color | light - dark background | • | |||||||||||||||
7 | accent and utility colors | light - dark background | • | |||||||||||||||
8 | tints-shadows/tones | • | ||||||||||||||||
9 | gradients scales | light - dark background | • | |||||||||||||||
10 | accessibility colors | |||||||||||||||||
11 | data viz palette colors | light - dark background | ||||||||||||||||
12 | IMAGERY | |||||||||||||||||
13 | TEXT_STYLES | typeface | typeface base_sans serif | • | ||||||||||||||
14 | typeface serif | • | ||||||||||||||||
15 | text styles | • | ||||||||||||||||
16 | line heigth | based on the font sizes | • | |||||||||||||||
17 | text color and contrast | dark an light background | • | |||||||||||||||
18 | ||||||||||||||||||
19 | GRID_SYSTEM | • | • | |||||||||||||||
20 | ||||||||||||||||||
21 | TIPOGRAPHY | |||||||||||||||||
22 | headings | H1 to H6 | • | • | • | |||||||||||||
23 | subheaders | • | • | |||||||||||||||
24 | code | • | • | • | ||||||||||||||
25 | paragraph | lenght, spacing, indent, rag, hanging quote | • | • | • | |||||||||||||
26 | blockquote | • | • | • | ||||||||||||||
27 | inline element | • | • | |||||||||||||||
28 | ||||||||||||||||||
29 | BUTTONS | dark and light bg | ||||||||||||||||
30 | primary | default, hover, active, focus, selected, disabled, async | • | • | • | |||||||||||||
31 | secondary | default, hover, active, focus, selected, disabled, async | • | • | • | |||||||||||||
32 | icon and label | default, hover, active, focus, selected, disabled, async | • | • | ||||||||||||||
33 | icon only | default, hover, active, focus, selected, disabled, async | • | • | • | |||||||||||||
34 | grouped | default, hover, active, focus, selected, disabled, async | • | • | ||||||||||||||
35 | split | default, hover, active, focus, selected, disabled, async | - | |||||||||||||||
36 | link | default, hover, active, focus, selected, disabled, async | • | • | ||||||||||||||
37 | full width | default, hover, active, focus, selected, disabled, async | • | • | ||||||||||||||
38 | ||||||||||||||||||
39 | NAVIGATION | |||||||||||||||||
40 | skiplink | • | • | • | ||||||||||||||
41 | pager | basic | default and active | • | • | • | ||||||||||||
42 | more | • | ||||||||||||||||
43 | changer (page size: 10 su 50) | • | ||||||||||||||||
44 | with jump to page | • | ||||||||||||||||
45 | simple mode (vedi acrobat) | • | ||||||||||||||||
46 | total number | • | ||||||||||||||||
47 | previous and next | • | ||||||||||||||||
48 | ||||||||||||||||||
49 | breadcrumbs | basic | • | • | • | |||||||||||||
50 | with icon | • | • | |||||||||||||||
51 | with different separator / > | • | • | |||||||||||||||
52 | ||||||||||||||||||
53 | dropdown menu | active on hover | with disable, hover, onclick elements | • | • | • | ||||||||||||
54 | active on click | with disable, hover, onclick elements | • | • | • | |||||||||||||
55 | button with dropdown (split) | with disable, hover, onclick elements | • | |||||||||||||||
56 | ||||||||||||||||||
57 | menu | contextual menu | • | • | • | |||||||||||||
58 | scrollable menu | • | ||||||||||||||||
59 | with disabled action | • | • | • | ||||||||||||||
60 | menu position | • | ||||||||||||||||
61 | ||||||||||||||||||
62 | linklist | single line linklist | hover, onclick, disable | • | • | • | ||||||||||||
63 | multiline linklist | hover, onclick, disable | • | • | • | |||||||||||||
64 | with controls (primary/secondary actions/checkbox,switches, reorder) | hover, checked/unchecked, on/off, disable | • | • | ||||||||||||||
65 | nested navigation with fixed and visible hierarchy | hover, onclick, disable | • | • | ||||||||||||||
66 | nested navigation expandable | expand/ collapse - default, hover, pressed, active, disable | • | • | ||||||||||||||
67 | ||||||||||||||||||
68 | mobile menu | offcanvas (toolkit danilo) or drawer | • | • | • | |||||||||||||
69 | single line linklist | hover, onclick, disable | • | • | • | |||||||||||||
70 | multiline linklist | hover, onclick, disable | • | • | • | |||||||||||||
71 | with controls (primary/secondary actions/checkbox,switches, reorder) | hover, checked/unchecked, on/off, disable | ||||||||||||||||
72 | nested navigation with fixed and visible hierarchy | hover, onclick, disable | ||||||||||||||||
73 | nested navigation expandable | expand/ collapse - default, hover, pressed, active, disable | • | • | ||||||||||||||
74 | ||||||||||||||||||
75 | megamenu | two levels | • | • | • | |||||||||||||
76 | three levels | • | ||||||||||||||||
77 | ||||||||||||||||||
78 | sidebar | basic | • | • | ||||||||||||||
79 | nested navigation | expand/ collapse - default, hover, pressed, active, disable | • | • | ||||||||||||||
80 | ||||||||||||||||||
81 | navscroll | • | • | • | ||||||||||||||
82 | ||||||||||||||||||
83 | Thumbnav and grid (entrypoint?) | default, hover, pressed | • | • | • | |||||||||||||
84 | ||||||||||||||||||
85 | ||||||||||||||||||
86 | affix | top, bottom | • | • | ||||||||||||||
87 | up (return) and back (chronological) button | • | • | |||||||||||||||
88 | ||||||||||||||||||
89 | tabs | fixed tab bar | active, not active | • | • | |||||||||||||
90 | scrollable tab bar | • | • | |||||||||||||||
91 | tab position (orizontal, vertical, up, bottom) | • | • | |||||||||||||||
92 | text tab - only icon - text and icon | • | • | |||||||||||||||
93 | card tab (desktop) | • | • | |||||||||||||||
94 | add and close tab | • | • | |||||||||||||||
95 | ||||||||||||||||||
96 | bottom nav | bottom nav text | default, highlighted | • | • | |||||||||||||
97 | bottom nav icon ( > three actions) | default, highlighted | • | • | ||||||||||||||
98 | bottom nav text and icon | default, highlighted | • | • | ||||||||||||||
99 | behavior: shifting/fixed | |||||||||||||||||
100 | steppers desktop | numbered step | success/editable, active, disable, error | • | • | |||||||||||||