Examples
You can combine those elements as much as you want. Here are a few examples on the possibilities offered by the Didomi Components.

Create a list of card with a responsive save button

1
window.didomiConfig = {
2
containers: [
3
{
4
id: "CONTAINER_ID",
5
// Don't forget to create your entities and containers here
6
...
7
components: {
8
breakpoints: {
9
mobile: 767
10
},
11
layout: [
12
{
13
id: "preference-card-1",
14
},
15
{
16
id: "preference-card-2",
17
},
18
{
19
id: "preference-card-3",
20
},
21
{
22
id: "save-preference",
23
}
24
],
25
activeComponents: [
26
{
27
id: "preference-card-1",
28
type: "card",
29
options: {
30
purposeId: "purpose-didomi-1",
31
preferenceId: "preference-didomi-1",
32
headerText: {
33
content: {
34
fr: "DIDOMI PREFERENCE 1"
35
}
36
},
37
color: "#003790",
38
hasBorder: true,
39
name: {
40
content: {
41
fr: "This is a custom name"
42
}
43
},
44
description: {
45
content: {
46
fr: "This is a custom description"
47
}
48
}
49
}
50
},
51
{
52
id: "preference-card-2",
53
type: "card",
54
options: {
55
purposeId: "purpose-didomi-1",
56
preferenceId: "preference-didomi-2",
57
headerText: {
58
content: {
59
fr: "DIDOMI PREFERENCE 2"
60
}
61
},
62
color: "#F07D5A",
63
hasBorder: true
64
}
65
},
66
{
67
id: "preference-card-3",
68
type: "card",
69
options: {
70
purposeId: "purpose-didomi-1",
71
preferenceId: "preference-didomi-3",
72
headerText: {
73
content: {
74
fr: "DIDOMI PREFERENCE 3"
75
}
76
},
77
color: "#F07D5A",
78
hasBorder: true
79
}
80
},
81
{
82
id: "save-preference",
83
type: "save",
84
options: {
85
backgroundColor: "#003790",
86
color: "#FFFFFF",
87
borderRadius: "2px",
88
style: {
89
default: {
90
alignItems: "center",
91
justifyContent: "flex-end"
92
},
93
mobile: {
94
flexDirection: "column",
95
alignItems: "initial"
96
}
97
},
98
saveButton: {
99
style: {
100
default: {
101
padding: "15px 30px"
102
}
103
}
104
}
105
}
106
}
107
]
108
}
109
]
110
}
111
};
112
113
// HTML
114
<didomi-container id="CONTAINER_ID"></didomi-container>
Copied!

Create a box with responsive design

To see the correct style, you need to load the window with the determined width already. Resizing the window after will not dynamically trigger the breakpoints.
Here is a basic example of responsive design. We allow you to have different styles depending on the window width. See this section for more information.
1
window.didomiConfig = {
2
...
3
components: {
4
breakpoints: {
5
mobile: 767
6
},
7
layout: [
8
{
9
id: "container",
10
children: [
11
{
12
id: "top",
13
children: [
14
{
15
id: "logo",
16
},
17
{
18
id: "title",
19
}
20
]
21
},
22
{
23
id: "description",
24
},
25
{
26
id: "save",
27
}
28
]
29
}
30
],
31
activeComponents: [
32
// Container Component
33
{
34
id: "container",
35
type: "block",
36
options: {
37
display: "flex",
38
style: {
39
default: {
40
flexDirection: "column",
41
padding: "10px",
42
boxShadow: "0 0 10px 0 rgba(49, 113, 64, 0.2)",
43
alignItems: "center",
44
}
45
}
46
}
47
},
48
// Top content Component
49
{
50
id: "top",
51
type: "block",
52
options: {
53
display: "flex",
54
style: {
55
default: {
56
justifyContent: "flex-start",
57
flexDirection: "column",
58
alignItems: "center",
59
paddingBottom: "10px",
60
},
61
}
62
}
63
},
64
// Image Component
65
{
66
id: "logo",
67
type: "image",
68
options: {
69
src: "https://www.didomi.io/hubfs/website/general/didomi_logo_dark.svg",
70
style: {
71
mobile: {
72
display: 'none'
73
}
74
}
75
}
76
},
77
// Title Component
78
{
79
id: "title",
80
type: "text",
81
options: {
82
content: "My title",
83
style: {
84
default: {
85
fontSize: "20px",
86
fontWeight: "800"
87
}
88
}
89
}
90
},
91
// Description Component
92
{
93
id: "description",
94
type: "text",
95
options: {
96
content: "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."
97
}
98
},
99
// Save button Component
100
{
101
id: "save",
102
type: "button",
103
options: {
104
text: {
105
content: "My Button",
106
},
107
style: {
108
default: {
109
backgroundColor: "#F07D5A",
110
color: "#FFFFFF",
111
padding: "15px 30px",
112
marginTop: "10px",
113
},
114
mobile: {
115
width: "100%"
116
}
117
}
118
}
119
}
120
]
121
}
122
};
123
124
// HTML
125
<didomi-container id="CONTAINER_ID"></didomi-container>
Copied!
Last modified 1yr ago