# Section

> The section you build yourself from blocks: headings, text, buttons, images, spacers, dividers and groups that nest into columns and cards. Five starting points in Add section.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/section/

## At a glance

- **In the editor:** Section
- **In Add section:** Divider, Empty section, Section, Columns, Call to action
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page; Every preset: Landing page
- **Settings:** 14
- **Theme blocks:** Yes – Heading, Text, Button, Image, Group and more
- **App blocks:** Yes

## Starting points

In **Add section › Layout**, the same Section appears five times, set up differently:

| In Add section | Starts with |
| --- | --- |
| **Empty section** | Nothing – add the blocks you need. |
| **Section** | A heading, a text and a button. |
| **Columns** | A row of three groups, each with an image, heading and text. Columns stack on phones. |
| **Call to action** | A narrow, centered heading and text with two buttons, on the strong band color. |
| **Divider** | A hairline across the page width with no padding of its own, to separate two sections. |

## Settings

- **Width:** *Narrow*, *Page* or *Full width*.
- **Text alignment:** the default for every block inside – each block can follow it or set its own.
- **Space between blocks:** 0–80 px.
- **Minimum height** with **Vertical alignment:** for a tall band with the content centered, at the top or at the bottom.
- **Color scheme**, spacing and the shared advanced settings.

## Blocks

[Heading](https://themelab.page/tally/docs/blocks/heading.md), [Text](https://themelab.page/tally/docs/blocks/text.md), [Button](https://themelab.page/tally/docs/blocks/button.md), [Image](https://themelab.page/tally/docs/blocks/image.md), [Spacer](https://themelab.page/tally/docs/blocks/spacer.md), [Divider](https://themelab.page/tally/docs/blocks/divider.md) and [Group](https://themelab.page/tally/docs/blocks/group.md), plus app blocks. Groups hold blocks – including other groups – which is how columns and cards are made.

## Recipes

### Three cards in a row

1. Add a **Group**, set **Layout** to *Row*.
2. Inside it, add three **Groups**. In each, turn on **Show background** and set **Padding** to 24.
3. Add an **Image**, a **Heading**, a **Text** and a **Button** to each card.

### A banner with a button row

1. Set **Minimum height** to 400 and **Vertical alignment** to *Middle*, with a bold color scheme.
2. Add a **Heading** (*Extra large*) and a **Text**.
3. Add a **Button row** (a Group set up as a row) with two buttons.

The **page.landing** template shows several sections built this way.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Section** (14 settings, in editor order)

Build the section from blocks. Use a Group with the Row layout for columns, and groups inside groups for cards.

| Setting | Options | Default |
| --- | --- | --- |
| **Width** | Narrow · Page · Full width | Page |
| **Text alignment** | Left · Center · Right | Left |
| **Space between blocks** | 0–80px (step 4) | 20px |
| **Minimum height** | 0–800px (step 20) | 0px |
| **Vertical alignment** | Top · Middle · Bottom | Middle |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 64px |
| **Bottom padding** | 0–160px (step 4) | 64px |
| **Top padding on mobile** | 0–120px (step 4) | 40px |
| **Bottom padding on mobile** | 0–120px (step 4) | 40px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Group](https://themelab.page/tally/docs/blocks/group.md): Holds other blocks – including groups – in a column or a row; turn on a background for cards.
- [Heading](https://themelab.page/tally/docs/blocks/heading.md): A heading in five sizes with its own HTML tag, alignment and line length.
- [Button](https://themelab.page/tally/docs/blocks/button.md): A link styled as a primary, secondary or accent button, or as a text link, in three sizes.
- [Build your own](https://themelab.page/tally/docs/build-your-own.md): When no ready-made section fits, build one from blocks – headings, text, buttons, images and groups that nest into columns and cards. Or bring your own code and apps.