sections

LayoutComponent ✅ Theme ✅ Options ❌ Content & Translations

The layout-component sections is mostly responsible of rendering the entities and acts as a container in the widget.

While this layout-component benefits only from DidomiStyle options, a set of options are available within the theme property and will be applied to all children of layout-component sections (section, preference, preference_value).

Element
Description
Values

backgroundColor

Background color of a purpose card

#FFFFFF

borderShape

Border radius of a purpose card

rounded, squared, smoothed

borderWidth

Thickness of the border of a purpose card

thin, medium, thick

borderColor

Color of the border of a purpose card

#FFFFFF

borderShadow

Shadow of a purpose card

small, medium, big

contentAlign

Text and inputs alignement (on

left, center

nameSize

Size of purpose or preference name

small, medium, big

nameColor

Color of purpose of preference name

#FFFFFF

nameFontFamily

Font-family * of purpose of preference name

'Roboto', sans-serif;

descriptionSize

Size of description of a purpose or a preference

small, medium, big

descriptionColor

Color of description of a purpose or a preference

#FFFFFF

descriptionFontFamily

Font-family of description of a purpose or a preference

'Roboto', sans-serif;

buttonType

Type of radio button / checkbox

list, button

buttonTextColor

Color of label of radio button / checkbox

#FFFFFF

buttonColor

Color of radio button / checkbox

#FFFFFF

buttonBackgroundColor

Background color of radio button / checkbox if button mode has been selected

#FFFFFF

buttonFontFamily

Font-family * of radio button / checkbox label

'Roboto', sans-serif;

buttonShape

Border radius of radio button / checkbox

rounded, squared, smoothed

PATCH https://api.didomi.io/widgets/layout-components/{layout_component_id}?organization_id=YOUR_ORG_ID&widget_id=YOUR_WIDGET_ID

{
    "type": "sections",
    "organization_id": "YOUR_ORGANIZATION_ID",
    "options": {
        "sectionOptions": {
            "card": {
                "style": {
                    "default": {
                        "padding": "32px 32px 46px"
                    }
                }
            },
            "imageType": "banner",
            "saveOnClick": true
        }  
    },
    "theme": {
        "nameSize": "medium",
        "nameColor": "#000",
        "buttonType": "button",
        "borderColor": "transparent",
        "borderShape": "squared",
        "borderWidth": "none",
        "buttonColor": "rgb(239, 193, 76)",
        "buttonShape": "squared",
        "borderShadow": "none",
        "contentAlign": "left",
        "nameFontFamily": "inherit",
        "backgroundColor": "transparent",
        "buttonTextColor": "#000",
        "descriptionSize": "medium",
        "buttonFontFamily": "inherit",
        "descriptionColor": "#000",
        "buttonBackgroundColor": "rgb(243, 240, 230)",
        "descriptionFontFamily": "inherit"
    }
}

* Font-family of widgets inherits by default from the one loaded on your website. If you want to change the font-family, you need to make sure that the new font-family is loaded on your website.

Last updated