# 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](https://able.bucca.com/core/overview/label), [Icon](https://able.bucca.com/core/overview/icon)

## Properties

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

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F42ii2fJ5J7oIZY3Z3Zow%2FSize.png?alt=media&#x26;token=d3fd18aa-96aa-46e9-84fe-8d2f84454201" 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="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fct1Nl51LaBDcT1NBY9yv%2FAlignment.png?alt=media&#x26;token=28da8b0e-b299-4442-a875-671bd8d7ee0a" 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="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FH9rscuF9ZbKGOmftMgI0%2FSurface.png?alt=media&#x26;token=23322894-8cb7-40fd-bc82-1e4159aa880f" 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.