> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/content-group.md).

# Content group

Group content using the provided blocks.

## Content group

{% hint style="success" %}
Available additional blocks: "[<mark style="color:blue;">Button</mark>](#button)", "[<mark style="color:blue;">Heading</mark>](#heading)", "[<mark style="color:blue;">Icon</mark>](#icon)", and "[<mark style="color:blue;">Text</mark>](#text)".\
**Tip:** Press **"Add block"** to use the desired block.
{% endhint %}

**Spacing above**\
Adjust the distance above content using a scale from 0 to 60 pixels.

**Placement**\
Choose where content is displayed within the section.

* **"Default"**. Displays in its default position based on the layout.
* **"Bottom"**. Places at the bottom of the section.
* **"Bottom on mobile"**. Places at the bottom of the section on mobile devices only.
* **"Bottom on tablet"**. Places at the bottom of the section on tablet devices only.

***

### Button

**Use as View all button**\
Enable this option to display the "View All" button, directing customers to view the complete list of products, collections, or other linked content instead of highlighting a specific item or action.

**Label**\
Enter the text displayed on the button.

**Link**\
Select a page or paste a URL that opens when customers click the button.

**Open in new tab**\
Enable this option to open the linked page in a new browser tab.

**Style**\
Select the desired style in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/button.md).

**Color**\
Applies color settings according to the selected button style:

* **"Primary"**. Changes the button background color.
* **"Secondary"**. Colorizes the text and border.
* **"Link style"**. Changes the text color.

***

### Heading

**Heading**\
Title the content group.\
Use the field to describe the highlighted feature or information.

**Size**\
Change the size to "Large" (h1), "Large" (h2), "Medium" (h2), or "Small" (h2).

**Color**\
Set the heading color.

***

### Icon

**Icon SVG**\
The field is designed to link SVG icons that come with the theme or paste HTML to display a custom SVG icon:

* To display the built-in theme graphics, add an icon name to the field. Learn how to use the theme SVG icons [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/svg-icons.md#built-in-theme-svg-icons).
* Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/svg-icons.md#integrate-custom-svg-icons-into-the-theme) for step-by-step instructions on the required modifications.

**Icon image**\
Optionally use an image instead of an SVG icon.\
Connect an image using the source selector. An image can be added from the store library or uploaded from your device.

**Icon color**\
Changes the icon color. Works for SVG icons.

***

### Text

**Text**\
Use the input field to add accompanying text to the heading.\
Style your text using the formatting options at the top of the input field.

**Color**\
Change the color using the provided picker.

***

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F5Qjdfhr5DiFhnD5cNfnd%2Fheader_content%20group.png?alt=media&amp;token=c37518bc-bacc-40e4-92f2-cff83d3a08e1" alt=""><figcaption></figcaption></figure>