# 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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F7dHjmBxNWo6OwiNvAlQp%2FSTO%20tabs%20main%201.jpg?alt=media&#x26;token=6195b693-0cad-42c4-b38b-b8783b08878b" alt=""><figcaption></figcaption></figure>

### Create a heading

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

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJY36BkGvmX3ARH6xIZ2i%2FSTO%20tabs%20both%20sections.jpg?alt=media&#x26;token=5d1c32fb-24b6-470d-813b-e82c98316a27" alt=""><figcaption></figcaption></figure>

### Adjust spacing

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

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FG45GakrpmD6emBVzB5hp%2FSTO%20tabs%20spacing%20narrow.jpg?alt=media&#x26;token=5cb2dc47-1c29-417f-bca0-111a564343f1" alt=""><figcaption></figcaption></figure>

### Blocks

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

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FGx84CjcJnRMx9maJvSr7%2FSTO%20tabs%20add%20blocks.jpg?alt=media&#x26;token=0db82971-8ee5-4c3c-81fd-f6fa44e814f1" alt=""><figcaption></figcaption></figure>

Use the block settings to customize the content:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FifiFAlq111Kujfxz9Zh9%2FSTO%20Tabs%20block%20setting%20text%20version.jpg?alt=media&#x26;token=2cfbbf40-0d4f-451a-ab2f-8409a9547d31" alt=""><figcaption></figcaption></figure>

### Images

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

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FNGJbvQE3hs8owis96a4Z%2FSTO%20tabs%20page%20example.jpg?alt=media&#x26;token=b6e3888c-02f8-4821-aec4-9f9d9dcc103b" 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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F5T4NSuoxVMe5JL1rlIk2%2FSTO%20tabs%20mobile%20arrow.jpg?alt=media&#x26;token=5ad854c8-913b-4313-99d5-b1e7e0934901" 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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FxCWWuMI0AXvCnenamMDO%2FSTO%20tabs%20mobile%20page%20image.jpg?alt=media&#x26;token=e9126798-40ec-4906-b641-c7fc6c6f3b6f" alt=""><figcaption></figcaption></figure>