# Article Hero Footer

## Essence

Private footer layer for `Article Hero`.

`Article Hero Footer` owns the bottom navigation action after the section's article-card surface.

## Hook

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

## Internal Rules

- Belongs to `Article Hero`.
- Renders the section-level `Read all notes` action.
- Uses `Icon and Label Button` with animated accent.
- Uses `Block Compact` top and bottom padding.
- Uses triple `Block Compact` bottom margin.
- Uses `Block` left/right spacing so the footer action aligns with `Article Hero Header`.
- Does not render a background; `Article Hero Content` owns the secondary background and its fades.
- Fills parent width.
- Does not render article cards, titles, descriptions, or arbitrary content.
- Does not decide article data or section order.

## Use When

- `Article Hero` needs its bottom footer layer.
- The bottom action needs to sit after the article section surface without owning the surface background.

## Do Not Use When

- A generic CTA row is needed outside `Article Hero`.
- A standalone button is needed; use `Icon and Label Button`.
- The content grid is needed; use `Article Hero Content`.

## Accessibility Notes

- The action is a normal link through `Icon and Label Button`.
- The parent section owns heading semantics.

## Related Components And Patterns

- `Article Hero`: parent and only approved owner.
- `Article Hero Content`: sibling content-surface layer that owns the background gradient.
- `Icon and Label Button`: renders the action.

## Code Paths

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