---
id: portfolio.ds.related-projects-content
name: "Related Projects Content"
type: subcomponent
status: active
relations: []
sources: ["apps/portfolio-site/src/design-system/docs/related-projects-content.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/RelatedProjectsContent.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/related-projects-content.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/related-projects-content.astro"]
---
# Related Projects Content

## Purpose
Card surface for the `Related Projects` block.

## Contract
- Use only inside `Related Projects`.
- Uses Block Compact spacing for the related-card grid.
- Grid gap follows card-grid rhythm: `--space-4` by default and `--space-3` on mobile.
- Shows up to four related projects by default.
- Accepts `limit` from `Related Projects`; index-page groups can pass their full group size.
- Uses one column on Mobile, two columns on Tablet, and four columns on Desktop and Ultra-wide.
- Preview breakpoint switching must mirror the real responsive grid.
- Temporarily owns no background or gradient fade while the related-project visual grouping is being reviewed.
- Uses `Project Item` with `state="small"` for each related item.
- Passes only content data and approved public props into `Project Item`.
- Must preserve content-owned visual metadata such as `visualKey`; this is project content data, not a parent override.
- Must not pass local CSS, image source overrides, or other child-internal visual controls into `Project Item`.
- The visual inside each related tile belongs to `Project Item`; this parent consumes the child as-is.
- Does not render the section title or follow-up action.

## Code Paths

- `packages/design-system/src/components/RelatedProjectsContent.astro`

## Use

Use when this named Design System contract is required by an approved composition or product surface.

## Do Not Use

Do not use outside the documented source, composition, or ownership contract without Design System Architect review.

## Accessibility

Preserve applicable accessibility behavior of the implementation and verify changes in actual usage.

## Verification

- Confirm every source path in frontmatter resolves to current implementation or documentation.
- Run `scripts/design-system-graph --check --no-write`.
- Verify actual usage and documented Preview against the enabled package profiles before completion.