> For the complete documentation index, see [llms.txt](https://story.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://story.groupthought.com/sections/story-sections/tabs.md).

# Tabs

Using tabs is a convenient way to display concise and condensed information. This is a great option to consider when you want to conserve vertical space, as it is an alternative to accordions.

<figure><img src="/files/HGCF9umCKvUEfWm6NkR3" alt=""><figcaption></figcaption></figure>

### Create a heading

Combine the **Tabs** section with a **Rich Text** section to build a custom heading:

<figure><img src="/files/LcsvVtx5hWqdV9RYvDV3" alt=""><figcaption></figcaption></figure>

### Adjust spacing

Unique styles can be created by adjusting the Width option in the Section settings:

<figure><img src="/files/DAwAw7eqaipAbvhZvxou" alt=""><figcaption></figcaption></figure>

### Blocks

Add a plain **Text** block or a **Page** block for the tab content and tab title:

<figure><img src="/files/RYEYPpng5hAGypPyZrZG" alt=""><figcaption></figcaption></figure>

Use the block settings to customize the content:

<figure><img src="/files/XUaGhYSzPvN95g0zGMLa" alt=""><figcaption></figcaption></figure>

### Images

When using the **Page** block, rich text and images can be displayed:

<figure><img src="/files/usqWSAzV8wPupgEgpC9e" alt=""><figcaption></figcaption></figure>

Page blocks can increase the height of the tab section based on the content in the Shopify Page selected.&#x20;

### Mobile

The tab headings become scrollable on mobile when the tab titles are too long to fit the device width:

<figure><img src="/files/Pa27G9VA31y4fNsvVZDk" alt=""><figcaption></figcaption></figure>

Page block content appears compressed to fit the width of the device. No cropping is used for the images:

<figure><img src="/files/K4V60VbRKnZHs7tO9Ji4" alt=""><figcaption></figcaption></figure>