# List: Header

On any [List layout](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types), 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)