# Related Use Cases

## Essence

Follow-up block for use-case detail pages.

`Related Use Cases` shows explicit neighboring use-cases as gallery cards after the main use-case body.

## Hook

Use when a visitor finishes a use-case and should continue to another concrete example.

## Internal Rules

- Renders nothing when the item list is empty.
- Shows up to four related use-cases by default.
- Composes `Related Use Cases Header`, `Related Use Cases Content`, and `Related Use Cases Footer`.
- `Related Use Cases Header` owns the title area and Block spacing.
- `Related Use Cases Content` owns the gray related-card surface, Block Compact spacing, and `Use Case Item` small-state rendering.
- `Related Use Cases Footer` owns the follow-up action and Block-aligned horizontal spacing.
- Keeps the related-use-case layout outside `Use Case Page`; the page composes this block instead of owning local related-card CSS.
- Accepts already-resolved use-case card data.
- Does not infer, rank, or generate related items.

## Use When

- A use-case detail page receives explicit related use-cases.
- A preview needs to exercise the related-use-case block independently.

## Do Not Use When

- Rendering article or note recommendations; use `Related Reading` instead.
- There are no explicit related use-cases.
- The page needs a full use-case index.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `title` | string | Optional section heading. Defaults to `Related use-cases`. |
| `items` | array | Related use-case card data with at least `title` and `href`. |
| `limit` | number | Maximum number of items to render. Defaults to `4`; callers may pass the group size for index-page groups. |
| `showAction` | boolean | Whether the footer action is rendered. Defaults to `true`; index pages may set `false`. |
| `actionHref` | URL string | Optional target for the follow-up action. Defaults to `/use-cases/`. |
| `actionLabel` | string | Optional follow-up action label. Defaults to `View all use-cases`. |

## Accessibility Notes

- The section has an accessible heading.
- Use-case cards should describe the target use-case.
- Empty state is intentionally quiet: no dead placeholder appears on use-case pages.

## Related Components And Patterns

- `Use Case Item`: renders each related use-case preview in small state.
- `Use Case Page`: composes this block after the main body.
- `Related Reading`: same pattern for article recommendations.

## Code Paths

- `packages/design-system/src/components/RelatedUseCases.astro`
- `packages/design-system/src/components/RelatedUseCasesHeader.astro`
- `packages/design-system/src/components/RelatedUseCasesContent.astro`
- `packages/design-system/src/components/RelatedUseCasesFooter.astro`