# Configuration

## Basic configuration

***

### Basic layout

**Field type**:\
Select

**Available values**:\
• Full-width\
• Full-width Boxed\
• Boxed

**Example value**:\
`Full-width Boxed`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Basic configuration"

**Technical name**:\
`twt-container-layout`

{% hint style="info" %}
Select the sizing mode of the container.
{% endhint %}

***

### Border radius

**Field type**:\
Number field

**Example value**:\
`2`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Basic configuration"

**Technical name**:\
`twt-border-radius`

## Background-image

***

### Background image

**Field type**:\
Media selection

**Example value**:\
\`\`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-background-image`

***

### Show background image

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-background-image-show`

***

### Image size

**Field type**:\
Select

**Available values**:\
• Initial size (auto)\
• Cover background completely (cover)\
• Cover background completely (contain)

**Example value**:\
`Initial size (auto)`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-background-image-size`

{% hint style="info" %}
**auto**\
The auto keyword scales the background image in the appropriate direction to maintain the initial aspect ratio.

**cover**\
The image is sized to maintain its aspect ratio while filling the element's entire content box.

**contain**\
The image is sized to maintain its aspect ratio while fitting within the element's content box.
{% endhint %}

***

### Position

**Field type**:\
Select

**Available values**:\
• left, top\
• left, center\
• left, bottom\
• right, top\
• right, center\
• right, bottom\
• center, top\
• center, center\
• center, bottom

**Example value**:\
`left, top`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-background-image-position`

***

### Repeat

**Field type**:\
Select

**Available values**:\
• No repeat (no-repeat)\
• Horizontal and vertical (repeat)\
• Horizontal (repeat-x)\
• Vertical (repeat-y)

**Example value**:\
`Horizontal and vertical (repeat)`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-background-image-repeat`

***

### Attachment

**Field type**:\
Select

**Available values**:\
• Background image scrolls with the page (scroll)\
• Background image stays fixed (fixed)

**Example value**:\
`Background image stays fixed (fixed)`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-background-image-attachment`

{% hint style="info" %}
**Scroll**:\
The background image scrolls with the page.

**Fixed**:\
The background image stays fixed relative to the viewport.
{% endhint %}

## Container

***

### Maximum width

**Field type**:\
Number field

**Example value**:\
`1400`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container"

**Technical name**:\
`twt-container-max-width`

***

### Outer spacing left/right @Phone (<576px)

**Field type**:\
Number field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container"

**Technical name**:\
`twt-container-padding-left-right`

{% hint style="info" %}
Set the outer spacing (left and right) of the main container on non-CMS pages.

default: 20
{% endhint %}

## Container (Basic layout "boxed")

***

### Margin bottom/top

**Field type**:\
Number field

**Example value**:\
`30`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"

**Technical name**:\
`twt-container-layout-margin-top-bottom`

{% hint style="info" %}
Just until "Container" > "Maximum width" reached.
{% endhint %}

***

### Drop shadow

**Field type**:\
Text field

**Example value**:\
`0 0 30px`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"

**Technical name**:\
`twt-container-layout-box-shadow`

***

### Shadow colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0.3)`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"

**Technical name**:\
`twt-container-layout-box-shadow-color`

## Container (Non-CMS pages)

***

### Margin top

**Field type**:\
Number field

**Example value**:\
`20`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-margin-top`

{% hint style="info" %}
Set the margin top of the main container on non-CMS pages.
{% endhint %}

***

### Margin bottom

**Field type**:\
Number field

**Example value**:\
`20`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-margin-bottom`

{% hint style="info" %}
Set the margin bottom of the main container on non-CMS pages.
{% endhint %}

***

### Padding @Phone (<576px)

**Field type**:\
Number field

**Example value**:\
`8`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-padding-phone-xs`

{% hint style="info" %}
Set the padding in the main container on non-CMS pages.
{% endhint %}

***

### Padding @Phone (landscape) (≥576px)

**Field type**:\
Number field

**Example value**:\
`15`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-padding-phone`

{% hint style="info" %}
Set the padding in the main container on non-CMS pages.
{% endhint %}

***

### Padding @Tablet (≥768px)

**Field type**:\
Number field

**Example value**:\
`20`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-padding-tablet`

{% hint style="info" %}
Set the padding in the main container on non-CMS pages.
{% endhint %}

***

### Padding @Desktop (≥1200px)

**Field type**:\
Number field

**Example value**:\
`30`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-padding`

{% hint style="info" %}
Set the padding in the main container on non-CMS pages.
{% endhint %}

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-border-color`

{% hint style="info" %}
Select the border colour of the main container on non-CMS pages.
{% endhint %}

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"

**Technical name**:\
`twt-container-main-background-color`

{% hint style="info" %}
Select the background colour of the main container on non-CMS pages.
{% endhint %}