# Configuration

## Basic configuration

***

### Sizing mode

**Field type**:\
Select

**Available values**:\
• Container-Max-Width (Full-width Boxed)\
• 100% (Full-width)

**Example value**:\
`Container-Max-Width (Full-width Boxed)`

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

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

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

***

### Margin bottom @Tablet/Desktop (≥768px)

**Field type**:\
Number field

**Example value**:\
`0`

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

**Technical name**:\
`twt-footer-main-section-margin-bottom`

***

### Padding top @Tablet/Desktop (≥768px)

**Field type**:\
Number field

**Example value**:\
`20`

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

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

***

### Padding right @Tablet/Desktop (≥768px)

**Field type**:\
Number field

**Example value**:\
`1`

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

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

***

### Padding bottom @Tablet/Desktop (≥768px)

**Field type**:\
Number field

**Example value**:\
`1`

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

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

***

### Padding left @Tablet/Desktop (≥768px)

**Field type**:\
Number field

**Example value**:\
`1`

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

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

***

### Column alignment

**Field type**:\
Select

**Available values**:\
• align center\
• space-between\
• space-around

**Example value**:\
`space-between`

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

**Technical name**:\
`twt-footer-justify-content`

{% hint style="info" %}
Select the desired horizontal alignment.

**left**\
Items are positioned at the beginning of the container.

**right**\
Items are positioned at the end of the container.

**center**\
Items are positioned at the center of the container.

**space-between**\
Items are positioned with space between them.

**space-around**\
Items are positioned with space before, between, and after them.
{% endhint %}

## Colour configuration

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

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

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

***

### Link colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

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

**Technical name**:\
`twt-footer-column-link-color`

***

### Link colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

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

**Technical name**:\
`twt-footer-column-link-color-hover`

***

### Background colour

**Field type**:\
Color picker

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

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

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

***

### Text colour (Headline)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

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

**Technical name**:\
`twt-footer-column-headline-color`

***

### Border colour (Headline)

**Field type**:\
Color picker

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

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

**Technical name**:\
`twt-footer-column-headline-border-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 "Main section" => Section "Background-image"

**Technical name**:\
`twt-footer-main-section-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 "Main section" => Section "Background-image"

**Technical name**:\
`twt-footer-main-section-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 "Main section" => Section "Background-image"

**Technical name**:\
`twt-footer-main-section-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 "Main section" => Section "Background-image"

**Technical name**:\
`twt-footer-main-section-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 "Main section" => Section "Background-image"

**Technical name**:\
`twt-footer-main-section-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 "Main section" => Section "Background-image"

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

## Typography

***

### Text alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align center\
• align right

**Example value**:\
`align left`

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

**Technical name**:\
`twt-footer-column-text-align`