> For the complete documentation index, see [llms.txt](https://docs.stackerhq.com/stacker-classic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-header.md).

# List: Header

On any [List layout](/stacker-classic/layout-types/list-display-types.md), you can add a header that will give your users more context about the page. For example, you can show off your most beautiful property in a property management app.

\
You can add a [header image](#h_01FS9KGZA5BGY39VHSM66Y0SD4), [title](#h_01FS9KHRN1GZMFA36SDGM6JN71), and [subtitle](#h_01FS9KHRN1GZMFA36SDGM6JN71).

![Screenshot\_2022-01-13\_at\_12.42.29.png](https://support.stackerhq.com/hc/article_attachments/4415140026003/Screenshot_2022-01-13_at_12.42.29.png)

## Enable Layout Header

1. Go to a List layout page
2. Click **Edit Layout**
3. Click **Header**

![header.gif](https://support.stackerhq.com/hc/article_attachments/15307722051219)

## Add a header title and description <a href="#h_01fs9khrn1gzmfa36sdgm6jn71" id="h_01fs9khrn1gzmfa36sdgm6jn71"></a>

You can use the header **title** and **subtitle** to further explain the purpose of the page. To add a header title and subtitle:

1. Go to a List layout page
2. Click **Edit Layout**
3. Click **Header**
4. Add the title and description
5. Click **Save Layout**

![Screenshot\_2022-06-08\_at\_12.37.34.png](https://support.stackerhq.com/hc/article_attachments/6808761664275/Screenshot_2022-06-08_at_12.37.34.png)

## Add a header image <a href="#h_01fs9kgza5bgy39vhsm66y0sd4" id="h_01fs9kgza5bgy39vhsm66y0sd4"></a>

The images need to be **.jpg**, **.png**, or **.gif**, with a recommended image height of 200px for small headers, and 400px for large. To upload a header image:

1. Go to a List layout page
2. Click **Edit Layout**
3. Click **Header** -> **Image** -> **+ Add**
4. Upload or search the image you want to use
5. Click **Save Layout**

### Advanced Settings: Size, Color Mode, Overlay

You can show either a **large** or a **small** header image, the **Color mode** lets you select the color of the text that overlaps the image, and the **overlay** will apply a tint to your image to make the text easier to read.

![CleanShot\_2023-03-29\_at\_12.21.18\_2x.png](https://support.stackerhq.com/hc/article_attachments/15307846186771)

### Image position

You can also adjust the **position** of the image within the header to the **top**, **center**, or **bottom**.

![CleanShot\_2023-03-29\_at\_12.23.36\_2x.png](https://support.stackerhq.com/hc/article_attachments/15307901707155)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.