# 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](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#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` |

```json
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.*