# 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 "Lower section" => Section "Basic configuration"

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

{% 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 "Lower section" => Section "Basic configuration"

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

***

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

**Field type**:\
Number field

**Example value**:\
`20`

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

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

***

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

**Field type**:\
Number field

**Example value**:\
`1`

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

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

***

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

**Field type**:\
Number field

**Example value**:\
`20`

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

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

***

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

**Field type**:\
Number field

**Example value**:\
`1`

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

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

***

### Column alignment

**Field type**:\
Select

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

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

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

**Technical name**:\
`twt-footer-columns-bottom-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 "Lower section" => Section "Colour configuration"

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

***

### Link colour

**Field type**:\
Color picker

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

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

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

***

### Link color @hover

**Field type**:\
Color picker

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

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

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

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#eef2f5`

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

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

***

### Text colour (Headline)

**Field type**:\
Color picker

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

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

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

***

### Border colour (Headline)

**Field type**:\
Color picker

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

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

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

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

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

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

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

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

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

## Typography

***

### Text alignment

**Field type**:\
Select

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

**Example value**:\
`align center`

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.themeware.design/manual/footer/lower-section/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.