# 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://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FFwFzUnBlIcpDsYBkWn65%2FPastedGraphic-2-25.png?alt=media&#x26;token=420aee2d-891b-47e9-945a-e43af72d5536" 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://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FQH13faEyeqTYHaCphRNz%2FPIP%20Tabs%20both%20sections.jpg?alt=media&#x26;token=d36bb663-8e8f-46be-89a4-8e9e7f707547" alt=""><figcaption></figcaption></figure>

### Adjust spacing

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

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FkTwjuFNSDJVa3aFHMefx%2FPIP%20tabs%20width%20example.jpg?alt=media&#x26;token=311ca640-1bee-43c2-bf4d-0759b0bcb3b6" 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://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FfWwTwgFjoQ7usrSt6PrW%2FPip%20tabs%20blocks.jpg?alt=media&#x26;token=57e85c5e-5f90-4573-94c6-a624603bfdbe" alt=""><figcaption></figcaption></figure>

Use the block settings to customize the content:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FV6yT1rMp6wcsbjTo81RC%2FPIP%20tabs%20block%20settings.jpg?alt=media&#x26;token=242803f5-477c-40b0-880c-bdb03700e95a" alt=""><figcaption></figcaption></figure>

### Images

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

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FDJ1pHNXytAKLk5rPpU1f%2FPIP%20tabs%20page%20example.jpg?alt=media&#x26;token=05585eae-c343-4aed-a381-694b63ed57ec" alt=""><figcaption><p><strong>Page block added</strong></p></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://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FwTw2BudphtCxmS3wYXdx%2FPastedGraphic-3-12.png?alt=media&#x26;token=085c0e36-9bf9-4b9e-b8a9-ee471c9d3101" 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://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FQrInmWtuYNsfGtLVhPvB%2FPastedGraphic-4-5.png?alt=media&#x26;token=4daa7497-35e0-4710-8834-8bca67576083" alt=""><figcaption></figcaption></figure>