---
id: portfolio.ds.project-about
name: "Project About"
type: pattern
status: active
relations: [{"type":"composes","target":"portfolio.ds.caption"},{"type":"composes","target":"portfolio.ds.floating-button"},{"type":"composes","target":"portfolio.ds.heading"},{"type":"composes","target":"portfolio.ds.icon-and-label-button"},{"type":"composes","target":"portfolio.ds.paragraph"},{"type":"related_to","target":"portfolio.ds.project-changelog-page"},{"type":"related_to","target":"portfolio.ds.project-landing-page"}]
sources: ["apps/portfolio-site/src/design-system/docs/project-about.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/ProjectAbout.astro","packages/design-system/src/components/ProjectLandingPage.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/project-about.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/project-about.astro"]
---
# Project About

## Purpose

Explain what a project can do now and make its primary access action easy to find before the structured Project Brief.

## Contract

- Appears directly after `Project Header` and before `Agent Ready Project Brief`.
- Uses `current_state.available` for the short current-capability paragraph when present and falls back to the canonical project summary.
- Shows `Updated on` and `Version` as two scannable facts below the paragraph.
- Uses `Caption color="primary" weight="medium"` for fact labels and `Paragraph color="secondary"` for fact values.
- Uses the current-state update date when available and falls back to the project update date.
- Formats dates with the project-wide `dd.mm.yyyy` convention and prefixes versions with `v`.
- Shows a supplied `prototypeLabel`, or Open prototype, when `prototypeHref` exists; otherwise shows Request a demo.
- Uses `Floating Button` with `floating={false}` for the primary prototype/demo action.
- When `changelogHref` exists, places a localized `Icon and Label Button` immediately beside the primary action.
- Keeps the changelog action secondary in emphasis and hides it entirely when no approved changelog exists.
- Lets the action row wrap without horizontal overflow on narrow mobile viewports.
- Uses Block spacing and remains cardless.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `description` | string | Short statement of what works now. |
| `lastUpdated` | ISO date string | Latest meaningful update date. |
| `version` | string | Current release identifier. |
| `prototypeHref` | URL | Optional public prototype target. |
| `prototypeLabel` | string | Optional project-specific label for the public prototype action. |
| `demoHref` | URL | Prepared demo-request email fallback. |
| `changelogHref` | URL | Optional localized Project changelog route. |
| `labels` | object | Supplies localized heading, metadata labels, and access-action text. |

## Use

- Directly below the hero on a Project Landing Page.

## Do Not Use

- As a full project story or replacement for Agent Ready Project Brief.
- For multiple equal primary actions.

## Accessibility

- Keep the section heading associated with its landmark.
- Keep metadata in semantic description-list markup.
- Preserve both actions' visible focus states and accessible labels.

## Verification

- Use the `Access` preview switcher to verify both Request a demo and Open prototype.
- Verify public-prototype and demo-request variants.
- Verify mobile, tablet, desktop, and ultra-wide layouts.
- Run `scripts/design-system-graph --check --no-write`.