# Configuration

## Basic configuration

***

### Margin top

**Field type**:\
Number field

**Example value**:\
`20`

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

**Technical name**:\
`twt-footer-margin-top`

{% hint style="info" %}
Set the margin top for the footer.

**Note**: This configuration only applies to pages without a USP bar in the footer.
{% endhint %}

***

### Padding top

**Field type**:\
Number field

**Example value**:\
`0`

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

**Technical name**:\
`twt-footer-padding-top`

***

### Padding bottom

**Field type**:\
Number field

**Example value**:\
`0`

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

**Technical name**:\
`twt-footer-padding-bottom`

***

### Padding left/right

**Field type**:\
Number field

**Example value**:\
`0`

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

**Technical name**:\
`twt-footer-padding`

## Colour configuration

***

### Background colour

**Field type**:\
Color picker

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

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

**Technical name**:\
`twt-footer-background-color`

## Background-image

***

### Show background image

**Field type**:\
Select

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

**Example value**:\
`show`

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

**Technical name**:\
`twt-footer-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 "Footer" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-footer-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 "Footer" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-footer-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 "Footer" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-footer-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 "Footer" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-footer-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 %}

***

### Background image

**Field type**:\
Media selection

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

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

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

## Typography

***

### Font family (Headlines)

**Field type**:\
Select

**Available values**:\
• Text\
• Headlines

**Example value**:\
`Text`

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

**Technical name**:\
`twt-footer-column-font-family`

***

### Font size

**Field type**:\
Number field

**Example value**:\
`16`

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

**Technical name**:\
`twt-footer-column-font-size`

***

### Font size (Headlines)

**Field type**:\
Number field

**Example value**:\
`18`

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

**Technical name**:\
`twt-footer-column-headline-font-size`

***

### Font weight (Headlines)

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`bold`

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

**Technical name**:\
`twt-footer-column-headline-font-weight`

***

### Text formatting (Headlines)

**Field type**:\
Select

**Available values**:\
• none\
• uppercase\
• lowercase\
• capitalize

**Example value**:\
`none`

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

**Technical name**:\
`twt-footer-column-headline-text-transform`

***

### Underline links (Headlines)

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`no`

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

**Technical name**:\
`twt-footer-column-headline-link-underline`

{% hint style="info" %}
Underline linked headlines so that clickable entries are clearly differentiated from non-clickable structural pages, thus improving accessibility.

**Note**: This configuration can be overwritten by the accessibility configuration "Underline links" in the Tab "Others" => Block "Accessibility" => Section "Layout".
{% endhint %}

## Columns

***

### Number of columns @Tablet (≥768px)

**Field type**:\
Select

**Available values**:\
• auto\
• 6 columns\
• 4 columns\
• 3 columns\
• 2 columns\
• 1 column

**Example value**:\
`4 columns`

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

**Technical name**:\
`twt-footer-grid-columns-tablet`

***

### Number of columns @Desktop (≥1200px)

**Field type**:\
Select

**Available values**:\
• auto\
• 6 columns\
• 4 columns\
• 3 columns\
• 2 columns\
• 1 column

**Example value**:\
`3 columns`

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

**Technical name**:\
`twt-footer-grid-columns`