> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Page Hero — compact title banner for interior pages

> The Page Hero section renders a compact title and description banner for interior pages. Use it at the top of About, Contact, Posts, and Tags pages.

The `page-hero` section renders a compact title banner designed for interior pages. Unlike the full [`hero`](/reference/sections/hero) section, `page-hero` omits CTA buttons and large images — it focuses on giving the page a clear, scannable heading and a one- or two-sentence description.

Use `page-hero` as the first section on every interior page: About, Contact, Posts archive, Tags index, and any static content page that needs a clear title without a conversion prompt.

***

## Data fields

<ParamField body="label" type="string">
  A small eyebrow label rendered above the title — for example `"About"` or `"Archive"`. Optional. Use it to give visitors immediate location context, especially when the page title is more poetic than literal.
</ParamField>

<ParamField body="title" type="string" required>
  The page title rendered as the primary heading — for example `"A journal that is also a diagram"`. Keep it concise; `page-hero` is a compact component and long titles may wrap awkwardly.
</ParamField>

<ParamField body="description" type="string">
  A short supporting sentence displayed below the title. Optional, but recommended — it gives search engines a readable summary and sets visitor expectations before they scroll into the page body.
</ParamField>

***

## Settings fields

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section. Use `"xl"` on the first section of a page to clear the navigation bar.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section. Omit to inherit the theme default.
</ParamField>

***

## JSON example

The following example is taken from `about.json`:

```json theme={null}
{
  "id": "about-hero",
  "type": "page-hero",
  "data": {
    "label": "About",
    "title": "A journal that is also a diagram",
    "description": "Inkwell exists to show one architectural idea clearly: entities as collections, relations as keys, and rendering as resolution."
  },
  "settings": {
    "paddingTop": "xl"
  }
}
```

<Note>
  The `description` field is optional in the schema but strongly recommended for SEO and accessibility. When omitted, the section renders as a plain title banner with no supporting copy.
</Note>

***

## Used on pages

`page-hero` is the standard first section on every interior page in OlonJS sites:

| Page | Typical `label` |
| - | - |
| About (`about.json`) | `"About"` |
| Posts archive (`posts.json`) | `"Archive"` |
| Tags index (`tags.json`) | `"Topics"` |
| Contact (`contact.json`) | `"Contact"` |

For the home page, use [`hero`](/reference/sections/hero) instead — it supports images and CTA buttons that `page-hero` does not.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.