# Article Hero Header

## Essence

Private title layer for `Article Hero`.

`Article Hero Header` makes the section heading area explicit. It owns the title and the Block spacing around that header layer.

## Hook

Use only inside `Article Hero`, before `Article Hero Content`.

## Internal Rules

- Belongs to `Article Hero`.
- Renders `Heading` level 2 for the title.
- Renders optional `Paragraph` for the description.
- Uses `Block` semantic spacing tokens for internal padding.
- Uses `Block` semantic spacing tokens for the title/description gap.
- Uses half of `Block` bottom spacing below the title so the header connects more tightly to the content surface.
- Fills parent width.
- Does not set a max-width; the title layer must use all available horizontal space.
- Does not render content slot children.
- Does not render a background, border, card, or frame.
- Does not decide homepage section order.

## Use When

- `Article Hero` needs to render its title.
- The Design System needs to document the section header layer as a real subcomponent.

## Do Not Use When

- A generic page header is needed.
- A hero title is needed; use `Homepage Hero`.
- The component needs to own the section content surface; use `Article Hero Content`.
- The component needs to own page-level spacing or ordering.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `title` | string | Section heading text. |
| `description` | string | Optional supporting description under the heading. |

## Accessibility Notes

- The title is rendered through `Heading` level 2.
- Description text uses `Paragraph` semantics.
- Parent pages should preserve logical heading order around `Article Hero`.

## Related Components And Patterns

- `Article Hero`: parent and only approved owner.
- `Article Hero Content`: sibling subcomponent inside `Article Hero`.
- `Heading`: renders the title.
- `Paragraph`: renders the optional description.
- `Spacing`: provides `Block` spacing tokens.

## Code Paths

- `packages/design-system/src/components/ArticleHeroHeader.astro`
- `packages/design-system/src/components/ArticleHero.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`