# Build your own sections

> 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.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/build-your-own/

## How building works

The **[Section](https://themelab.page/tally/docs/sections/section.md)** section is an empty frame with a width, an alignment and a color scheme. You fill it with **theme blocks**, in any order:

- [Heading](https://themelab.page/tally/docs/blocks/heading.md): Five sizes, its own HTML tag and a readable line length.
- [Text](https://themelab.page/tally/docs/blocks/text.md): Rich text in three sizes, optionally softer.
- [Button](https://themelab.page/tally/docs/blocks/button.md): Primary, secondary, accent or a text link.
- [Image](https://themelab.page/tally/docs/blocks/image.md): Any shape, width, link and caption.
- [Spacer](https://themelab.page/tally/docs/blocks/spacer.md): Empty space, with its own height on mobile.
- [Divider](https://themelab.page/tally/docs/blocks/divider.md): A hairline with space around it.
- [Group](https://themelab.page/tally/docs/blocks/group.md): Columns, rows and cards – groups nest inside groups.

A **Group** in a row makes columns that stack on phones; a group with **Show background** becomes a card. With these two ideas you can build almost any layout: feature cards, a pricing row, a banner with buttons, a team grid.

## Code and apps

- [Section](https://themelab.page/tally/docs/sections/section.md): Build any section from blocks – headings, text, buttons, images, spacers, dividers and nestable groups.
- [Custom Liquid](https://themelab.page/tally/docs/sections/custom-liquid.md): Run your own Liquid, HTML and JavaScript – for embed codes and small additions.
- [Apps](https://themelab.page/tally/docs/sections/apps.md): A section that holds app blocks on a row of their own – reviews, galleries, forms and more.