# Article Hero

## Essence

Concrete homepage section that renders the latest article teasers.

`Article Hero` combines the section title and section content surface into one approved homepage article block. `Home Page` uses this component directly instead of locally nesting article layout.

## Hook

Use on the homepage when the page needs to show the newest notes/articles.

## Internal Rules

- Uses `Article Hero Header` for the section title.
- Uses `Article Hero Content` for the content surface, nested `Card Grid`, and `Article Card`.
- Uses `Article Hero Footer` for the bottom `Read all notes` action.
- Does not assemble `Card Grid` or `Article Card` directly.
- Passes article data to `Article Hero Content`.
- Shows latest articles through `Article Hero Content`.
- Assumes the parent passes articles sorted newest-first.
- Relies on `Article Hero Content` to render only the first four items.
- Keeps the bottom footer/action outside `Article Hero Content`.
- Default real title is `What matters now`.
- Design System preview uses abstract article cards.
- Does not accept arbitrary slot content.
- Does not own page order; `Home Page` decides where this section appears.

## Use When

- The homepage needs to show latest notes/articles.
- A concrete article section is needed, not a generic section wrapper.

## Do Not Use When

- The page needs a generic content section.
- The section content is not article cards.
- A full article index is needed; use `Articles Index Page`.
- A single article is needed; use `Article Page`.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `notes` | array | Newest-first article teaser data. |
| `title` | string | Optional section title override. |
| `id` | string | Optional section anchor id; defaults to `what-i-think`. |

## Accessibility Notes

- The section title is rendered through `Article Hero Header`.
- `Article Hero Content` owns article card link semantics through `Article Card`.
- `Card Grid` does not add semantics by itself.

## Related Components And Patterns

- `Home Page`: parent composition.
- `Article Hero Header`: private title layer.
- `Article Hero Content`: private content-surface layer.
- `Article Hero Footer`: private bottom footer layer.
- `Card Grid`: repeated article card layout nested inside `Article Hero Content`.
- `Article Card`: article teaser item rendered by `Article Hero Content`.

## Code Paths

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