# Tabs

> Content in tabs, each with an image, a heading, text and a button – as an underlined row, pills or a list on the side. Good for a routine step by step, materials or how an order works.

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

## At a glance

- **In the editor:** Tabs
- **Where it goes:** Any page template, with Add section
- **In the presets:** Petal: Home page
- **Settings:** 18
- **Blocks:** Tab
- **App blocks:** Yes

## Set it up

1. Add a **Tab** block for each tab and write its **Tab label**, with an optional **Icon**.
2. Fill the tab: **Image**, **Heading**, **Text** and a **Button**.
3. Or pick a **Page** in **Page content** to show the text of a page from Online Store > Pages – handy for delivery or care information you keep in one place.

## Options

- **Tab style:** an *Underlined row*, *Pills*, or a *List on the side* for longer labels.
- **Heading and tabs alignment:** left or center.
- **Image position on desktop:** left or right; **Image ratio:** landscape, square or portrait.
- **Show placeholders for missing images** keeps the layout while photos are on their way.
- **Tab heading size:** the size of the heading inside each tab.

Tabs are keyboard friendly: shoppers move between them with the arrow keys. The Petal preset uses tabs for its routine on the home page.

## All settings

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

**Section: Tabs** (18 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | – |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading and tabs alignment** | Left · Center | Left |
| **Tab style** | Underlined row · Pills · List on the side | Underlined row |
| **Image position on desktop** | Left · Right | Right |
| **Image ratio** | Landscape · Square · Portrait | Landscape |
| **Show placeholders for missing images** | Checkbox | On |
| **Tab heading size** | Medium · Small · Extra small | Small |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

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

*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 | – |

## Block settings

**Block: Tab** (9 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Tab label** | Text | Sample text |
| **Icon** | None · Truck · Return · Shield · Card · Chat · Gift · Tag · Box · Leaf · Clock · Star · Heart · Pin · Phone · Email · Sparkle · Globe | None |
| **Image** | Image | – |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | Sample text |
| **Page content** | Page | – |
| **Button label** | Text | – |
| **Button link** | Link | – |
| **Button style** | Primary · Secondary | Secondary |

## Related

- [Timeline](https://themelab.page/tally/docs/sections/timeline.md): Steps along a line – your story, how a product is made, or what happens after an order – in four layouts.
- [FAQ](https://themelab.page/tally/docs/sections/faq.md): Questions that open one at a time, with a heading and a contact button beside them, and structured data for search engines.
- [Image with text](https://themelab.page/tally/docs/sections/image-with-text.md): A photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.