> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/shared-settings/section-layout.md).

# Section layout

Use the '**Width**' setting to control how wide the section appears:

* **Default** – Uses the theme’s standard width.
* **Fixed** – Keeps content within a set width.
* **Full** – Expands the section across the full screen.

Adjust the space above and below the section using '**Top / bottom spacing**':

* **Default** – Uses the theme’s spacing settings from the '*Top/bottom section spacing*' scale under *Theme settings ->* [*<mark style="color:$primary;">Layout</mark>*](/triumph/theme-settings/theme-settings.md#layout).
* **Custom** – Activates the '**Custom top / bottom spacing**' scale (0–100 px).

**Remove bottom spacing**\
Eliminates an extra space below the section.

**Spacing between banners**\
Turn on to add space between banners.

{% hint style="success" %}
Example from the '*Collage*' section.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FjuxH4tWWKkb1tu74tkKy%2Fcollage_banner%20spacing.png?alt=media&amp;token=2ebed13a-57cb-44c2-b509-d96315111a54" alt=""><figcaption></figcaption></figure>

**Columns**\
Choose how many banners are shown per row (2-8).

**Columns on tablet**\
Set the number of columns for tablets (2-4).

**Show edges**\
Displays part of the next banner at the edge of the screen, giving a preview of more content.

{% hint style="success" %}
Example from the '*Banners carousel*' section.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FEOBt7xllFcYlqJiV3xEu%2Fbanners%20carousel_edges.png?alt=media&amp;token=8d60a588-4b02-4043-9666-9245453c46a9" alt=""><figcaption></figcaption></figure>

**Navigation position**\
Choose where the navigation arrows appear: Top right, Bottom left, Bottom center, or Bottom right.

{% hint style="success" %}
Example from the '*Banners carousel*' section.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FkGZdEpQtgRFXJlED9SPJ%2Fbanners%20carousel_navigation%20position.png?alt=media&amp;token=dc1bf310-440b-4695-88a9-992d35763174" alt=""><figcaption></figcaption></figure>

**Show navigation bar on hover**\
Displays a navigation bar between the arrows when you hover over the section.

{% hint style="success" %}
Example from the '*Collection list*' section.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FGsI9i7E9Xs2EenCLh1Lm%2Fnavigation%20bar%20hover.png?alt=media&amp;token=ca4b01be-9494-456a-adf0-fe2828f2304f" alt=""><figcaption></figcaption></figure>
