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.