---
title: "Grouping Block Demo"
description: "Base setup on top of headless services to help you get started quickly"
language: "English"
url: "https://head-start.pages.dev/en/demos/grouping-block-demo/"
---

Copy page

* [Open in Claude ](https://claude.ai/new?q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fgrouping-block-demo%2F+and+explain+it+to+me.)
* [Open in ChatGPT ](https://chatgpt.com/?hints=search\&q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fgrouping-block-demo%2F+and+explain+it+to+me.)

# Grouping Block Demo

!Note: this piece of documentation is auto-generated from [blocks/GroupingBlock/README.md](https://github.com/voorhoede/head-start/tree/main/src/blocks/GroupingBlock/README.md).

**Renders multiple blocks and groups them into one**

Blocks are individual components, but sometimes you may want to group them together for better organization and presentation.

The Grouping Block supports various layouts, such as an accordion, tabs, or a plain stack of items, using its `layout` property.

***

This is the first item

This is the second item

This is the third item

This is the first item

This is the second item

This is the third item

This is the first item

This is the second item

This is the third item

***

## Stack 1

This is the first item

This is the second item

This is the third item

## Stack 2

This is the first item

This is the second item

This is the third item

## Stack 3

This is the first item

This is the second item

This is the third item

***

Accordion 1

This is the first item

This is the second item

This is the third item

Accordion 2

This is the first item

This is the second item

This is the third item

Accordion 3

This is the first item

This is the second item

This is the third item

***

Accordion 1

This is the first item

This is the second item

This is the third item

Accordion 2

This is the first item

This is the second item

This is the third item

Accordion 3

This is the first item

This is the second item

This is the third item

***

<!-- [html-validate-disable-next prefer-native-element -- incompatible with custom element] -->

Tab 1

<!-- [html-validate-disable-next prefer-native-element -- incompatible with custom element] -->

This is the first item

This is the second item

This is the third item

<!-- [html-validate-disable-next prefer-native-element -- incompatible with custom element] -->

Tab 2

<!-- [html-validate-disable-next prefer-native-element -- incompatible with custom element] -->

This is the first item

This is the second item

This is the third item

<!-- [html-validate-disable-next prefer-native-element -- incompatible with custom element] -->

Tab 3

<!-- [html-validate-disable-next prefer-native-element -- incompatible with custom element] -->

This is the first item

This is the second item

This is the third item