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

window.didomiConfig = {
containers: [
{
id: "CONTAINER_ID",
// Don't forget to create your entities and containers here
...
components: {
breakpoints: {
mobile: 767
},
layout: [
{
id: "preference-card-1",
},
{
id: "preference-card-2",
},
{
id: "preference-card-3",
},
{
id: "save-preference",
}
],
activeComponents: [
{
id: "preference-card-1",
type: "card",
options: {
purposeId: "purpose-didomi-1",
preferenceId: "preference-didomi-1",
headerText: {
content: {
fr: "DIDOMI PREFERENCE 1"
}
},
color: "#003790",
hasBorder: true,
name: {
content: {
fr: "This is a custom name"
}
},
description: {
content: {
fr: "This is a custom description"
}
}
}
},
{
id: "preference-card-2",
type: "card",
options: {
purposeId: "purpose-didomi-1",
preferenceId: "preference-didomi-2",
headerText: {
content: {
fr: "DIDOMI PREFERENCE 2"
}
},
color: "#F07D5A",
hasBorder: true
}
},
{
id: "preference-card-3",
type: "card",
options: {
purposeId: "purpose-didomi-1",
preferenceId: "preference-didomi-3",
headerText: {
content: {
fr: "DIDOMI PREFERENCE 3"
}
},
color: "#F07D5A",
hasBorder: true
}
},
{
id: "save-preference",
type: "save",
options: {
backgroundColor: "#003790",
color: "#FFFFFF",
borderRadius: "2px",
style: {
default: {
alignItems: "center",
justifyContent: "flex-end"
},
mobile: {
flexDirection: "column",
alignItems: "initial"
}
},
saveButton: {
style: {
default: {
padding: "15px 30px"
}
}
}
}
}
]
}
]
}
};
// HTML
<didomi-container id="CONTAINER_ID"></didomi-container>

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.

window.didomiConfig = {
...
components: {
breakpoints: {
mobile: 767
},
layout: [
{
id: "container",
children: [
{
id: "top",
children: [
{
id: "logo",
},
{
id: "title",
}
]
},
{
id: "description",
},
{
id: "save",
}
]
}
],
activeComponents: [
// Container Component
{
id: "container",
type: "block",
options: {
display: "flex",
style: {
default: {
flexDirection: "column",
padding: "10px",
boxShadow: "0 0 10px 0 rgba(49, 113, 64, 0.2)",
alignItems: "center",
}
}
}
},
// Top content Component
{
id: "top",
type: "block",
options: {
display: "flex",
style: {
default: {
justifyContent: "flex-start",
flexDirection: "column",
alignItems: "center",
paddingBottom: "10px",
},
}
}
},
// Image Component
{
id: "logo",
type: "image",
options: {
src: "https://www.didomi.io/hubfs/website/general/didomi_logo_dark.svg",
style: {
mobile: {
display: 'none'
}
}
}
},
// Title Component
{
id: "title",
type: "text",
options: {
content: "My title",
style: {
default: {
fontSize: "20px",
fontWeight: "800"
}
}
}
},
// Description Component
{
id: "description",
type: "text",
options: {
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."
}
},
// Save button Component
{
id: "save",
type: "button",
options: {
text: {
content: "My Button",
},
style: {
default: {
backgroundColor: "#F07D5A",
color: "#FFFFFF",
padding: "15px 30px",
marginTop: "10px",
},
mobile: {
width: "100%"
}
}
}
}
]
}
};
// HTML
<didomi-container id="CONTAINER_ID"></didomi-container>