---
id: portfolio.ds.rich-text-summary
name: "Rich Text Summary"
type: subcomponent
status: active
relations: [{"type":"composes","target":"portfolio.ds.rich-text"}]
sources: ["apps/portfolio-site/src/design-system/docs/rich-text-summary.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/ArticlePage.astro","packages/design-system/src/components/RichTextSummary.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/rich-text-summary.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/rich-text-summary.astro"]
---
# Rich Text Summary

## Purpose
Lazy-reader summary block inside Rich Text.

`Rich Text Summary` renders a compact summary as part of the Rich Text flow, before the long-form body continues.

## Hook

Use inside `Rich Text` when an article or content snapshot provides an approved short summary.

## Contract
- Consumes `--spacing-rich-text-top/right/bottom/left`.
- Uses `--measure-rich-text-supporting` (`55ch`) and never extends beyond Paragraph.
- Uses a left rule instead of a card, border box, or grey surface.
- Renders summary text only.
- Belongs to the Rich Text rhythm and should not be spaced from a parent override.
- Does not render a heading, article metadata, tags, body paragraphs, navigation, or related reading.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `text` | string | Short summary for lazy readers. |

## Code Paths

- `packages/design-system/src/components/RichTextSummary.astro`
- `packages/design-system/src/components/ArticlePage.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.
