> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/content-and-information/custom-section-header.md).

# Custom Section Header

The **Custom Section Header** block is designed to create a standalone **section title area** on your page. It can also be used as an introductory header for other content sections, helping users quickly understand the structure or theme of the upcoming content.

You can enrich this section with various content blocks to make it more informative and visually engaging.

***

### 🧱 Supported Content Blocks

You can freely combine the following blocks to customize your section header layout:

* **Badge Group** – Highlight tags like “New”, “Limited Offer”, etc.
* **Button / Button Group** – Add action buttons (e.g., “Shop Now”, “View More”)
* **Countdown Timer** – Show time remaining for a deal or event
* **Text Description** – Provide a short summary or introduction to the section
* **Discount Code** – Display a promo code with usage instructions
* **Follow Us** – Add prompts to follow your brand on social platforms
* **Title / Subtitle** – Set a clear and prominent heading and subheading
* **Highlighted Stats** – Display key metrics or numbers (e.g., reviews, sales)
* **Icon / Icon with Text** – Add graphical elements to emphasize content
* **Keywords** – Display a list of related keywords or tags
* **Link Group / Link Text** – Provide quick links to related content or pages
* **Social Media List** – Show icons linking to your social media accounts
* **Video Button** – Insert a button that plays a promotional or introductory video
* **Spacer** – Adjust vertical spacing between elements for better layout control

***

### Subheading styling

When adding a **Subheading** block, you can use the style options to make short label text stand out:

* Enable a custom color and choose the subheading color.
* Show an **Accent Line** for extra emphasis.

The Accent Line appears below the subheading and follows the content alignment, so it can appear left-aligned, centered, or right-aligned with the subheading.

***

### Description styling

When adding a **Description** block, you can choose the font size that best fits the section:

* **Small** for compact supporting copy.
* **Medium** for the default description size.
* **Large** when the description should have more visual presence.

***

### ✅ Best Practices

* Use as a **section divider** with clear headings to organize long pages.
* Combine with buttons, countdowns, or badges for **promotional sections**.
* Apply background colors or images for stronger **visual distinction**.
* Follow your brand’s color and font style for a **consistent look and feel**.