# Article Hero Content

## Essence

Private content layout component for `Article Hero`.

`Article Hero Content` makes the section content layer explicit. It owns the inner Block Compact spacing layer, nested `Card Grid`, and `Article Card` rendering for notes supplied by `Article Hero`.

## Hook

Use only inside `Article Hero` when rendering the section's article content.

## Internal Rules

- Belongs to `Article Hero`.
- Receives note/article data from `Article Hero`.
- Owns the nested `Card Grid`; parent components must not wrap cards in `Card Grid` directly.
- Owns `Article Card` rendering for the supplied notes.
- Renders the latest four notes only.
- Uses compact grid density by default.
- Fills parent width.
- Uses `Block Compact` semantic spacing tokens for internal padding.
- Uses `Block Compact` semantic spacing tokens for the nested `Card Grid` spacing context.
- Uses `Background Secondary` as a vertical surface gradient: fade in over `--space-4`, stay solid in the middle, then fade out over `--space-4`.
- Intentionally creates a second Block Compact spacing layer inside `Article Hero`.
- Does not render a title, description, border, card, or frame.
- Does not choose article data; it only renders the first four items it receives.
- Does not render the section-level footer/action; use `Article Hero Footer` for that layer.

## Use When

- `Article Hero` needs to render its article-card content without assembling cards itself.
- The Design System needs to document the section content slot as a real subcomponent.

## Do Not Use When

- A generic content container is needed outside `Article Hero`.
- A page-level container is needed.
- A standalone card/grid/list component is needed outside homepage article content.
- A generic background surface is needed outside `Article Hero`.

## Accessibility Notes

- This component does not add semantics by itself.
- `Article Card` keeps article link semantics and accessible names.
- `Article Hero` owns the surrounding heading semantics.

## Related Components And Patterns

- `Article Hero`: parent and only approved owner.
- `Article Hero Header`: sibling subcomponent inside `Article Hero`.
- `Article Hero Footer`: sibling bottom footer layer.
- `Card Grid`: nested layout owned by this component.
- `Article Card`: article teaser rendered by this component.
- `Stub Object`: useful only in Design System previews.

## Code Paths

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