Examples

You can combine those elements as much as you want. Here is a basic example of a preference center.

Create a list of card with a responsive save button

window.didomiConfig = {
// Don't forget to create your entities and containers here
...
components: {
breakpoints: {
mobile: 767
},
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-card id="preference-card-1"></didomi-card>
<didomi-card id="preference-card-2"></didomi-card>
<didomi-card id="preference-card-3"></didomi-card>
<didomi-save id="save-preference"></didomi-save>