# Section Header

Component: Used at the top of list, card, grid, masonry sections to separate groupings of like items into sections. Actionable icons/text can be used as well to jump the user to additional functionality or activities. For Ex. A "More" text link to a full list, which the Section only represents a few.

[Styleguide Link](https://zpl.io/2pRQ39M)

* Parent: ListView, CardView, GridView, MasonryView
* Child: [Label](/core/overview/label.md), [Icon](/core/overview/icon.md)

## Properties

**Size**: Generally the size of the title and its relative component height.

<figure><img src="/files/mpcZJio6PkCEtqG0vHXF" alt=""><figcaption></figcaption></figure>

* Tiny (R4B)
* XSmall (R3B)
* Small (R2B)
* Medium (R1B)
* Large (H5B)
* XLarge (H4B)
* Huge (H3B)

**Alignment**: Can be left aligned or center depending on the use case

<figure><img src="/files/B2377PAT8d1hfYZaS4ff" alt=""><figcaption></figcaption></figure>

**Surface**: Light, Dark, or Neutral depending on the section it is being paired with, list, card, grid, masonry's background.

<figure><img src="/files/sO3UoPKyNWITtzSe9IWx" alt=""><figcaption></figcaption></figure>

**Divider** - A division line at the bottom of the Section Header to draw more attention to the start of the section. This option is Off by default.

## Interaction

The Labels to the Left and Right of the Title for the Section are meant to serve as tappable/clickable Actions. These could expand/collapse a section, order a list, open a menu... many types of Action. Note, at the smaller sizes the hit area for these Labels (text and/or icons) is below the recommended hit area sizes, so these will primarily exist as visual ID's for content columns that may form in the list.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://able.bucca.com/core/components/sec-head.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.