# Section header

The section header is not meant to be a standalone section. Rather, it is meant to be combined with any other section to create a heading.

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FUfB69c06VM9X5FGrXB6W%2FPrimavera%20Composition%20%C2%B7%20Customize%20primavera-1-0-0-%20Theme%20blocks%20%C2%B7%20Shopify%202025-04-02%20at%205.25.19%20pm.jpg?alt=media&#x26;token=9c718af6-9dab-4846-b322-a4b964f5000f" alt=""><figcaption><p>Left-aligned layout</p></figcaption></figure>

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FKXe8xr3JxJE1xPn8aNeA%2FPrimavera%20Composition%20%C2%B7%20Customize%20primavera-1-0-0-%20Theme%20blocks%20%C2%B7%20Shopify%202025-04-02%20at%205.27.40%20pm.jpg?alt=media&#x26;token=54702ecb-e8b6-48cf-b828-1bae296e2753" alt=""><figcaption><p>Center-aligned layout</p></figcaption></figure>

### Settings

* **Layout**: Choose between a **left-aligned** or a **centered** layout
* **Text content**:
  * **Subheading**
  * **Heading**&#x20;
  * [Set as page title](https://docs.ultramarinastudios.com/common-settings#set-as-page-title)
  * **Heading size**
  * **Count (optional)**: If heading accents are enabled, gives users a sense of how many items are in the section
  * **Text**
  * **Button label** and **link**

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](https://docs.ultramarinastudios.com/common-settings):

* Color scheme/Color scheme transition
* Padding&#x20;
* Borders
  {% endhint %}

{% hint style="info" %}
Tip: Decrease the bottom padding to visually connect the section header to the content below it!
{% endhint %}

### Examples & inspiration

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FD6ga3YQdhklFBl5ufwNw%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-02%20at%205.39.55%20pm.jpg?alt=media&#x26;token=940abf4c-ae83-4d0d-8a18-620fa9ba1294" alt=""><figcaption><p>Create a custom product header by adding the title and description as dynamic sources.</p></figcaption></figure>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="rich-text-columns">rich text columns section</a> allows you to add any content within two equal columns for greater flexibility.</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FoM9OPJhFqDr8EPlFw6OK%2FPrimavera%20Gloss%202025-04-02%20at%205.07.07%20pm.jpg?alt=media&#x26;token=6b2fb78d-6a79-4140-8894-c15d3b7fd74c">Primavera Gloss 2025-04-02 at 5.07.07 pm.jpg</a></td></tr></tbody></table>
