# Group Header

## Anatomy

<img src="/images/uxd/group-header.png">

- **Label:** A text label that provides a brief description or title for the grouped content.
- **Image:** An optional visual representation or thumbnail accompanying the label, providing additional context or visual appeal.
- **Trailing Element:** A customizable element positioned at the end of the header, which can include an icon, a link, a toggle button, or swipe icon buttons, providing supplementary actions.
- **Divider:** A visual divider to visualize where the header stops and the grouped content starts.

## Usage

The group header is designed to frame and organize a group of other components, such as list items, puffar, or a grid list.

### Dos

- **Provide Clear and Descriptive Labels:** Ensure that the label accurately describes the content or purpose of the grouped elements, enhancing clarity and usability.
- **Use Visuals Wisely:** Incorporate images judiciously to provide additional context or visual interest, but avoid overcrowding the header with excessive visuals that may distract from the label.
- **Customize Trailing Elements Appropriately:** Utilize trailing elements such as icons, links, toggle buttons, or swipe icon buttons to enhance functionality or provide relevant actions related to the grouped content.

### Don'ts

- **Never use a group header to frame a single component.**