Cards

Card components for displaying structured content with consistent styling and behavior.

PrdCard (Default Styling)

Example PRD (Heading Scale Padding)

Updated: June 6, 2025

PrdSection - With Content (Default)

Product Overview & Vision

85%

This section describes the core vision and overview of the product.

Key Features

  • Feature 1
  • Feature 2
  • Feature 3

User Stories & Requirements

60%

Detailed user stories and functional requirements.

Core User Stories

  • As a user, I want to...
  • As an admin, I need to...

Technical Architecture

0%

Implementation Timeline

100%

Project timeline and milestones.

Phase 1

  • Week 1-2: Setup
  • Week 3-4: Core features

PrdSection - Header Only (showContent=false)

Product Overview & Vision

85%

User Stories & Requirements

60%

Technical Architecture

0%

Implementation Timeline

100%

PrdSection - Interactive (with onClick)

Product Overview & Vision

85%

User Stories & Requirements

60%

Implementation Notes

PrdCard

The PrdCard component (src/app/app/components/PrdCard.tsx) renders its title using --text-heading styles, applies padding using .card--padding-text-heading (1.127em), and uses rounded-[var(--border-radius-lg)] (approx 10px).

The delete icon uses text-[var(--color-light-onsurface-lkv-muted)] and brightens on hover. Base classes .card and.card--outline are applied for structure and border.

PrdSection

The PrdSection component (src/components/ui/PrdSection.tsx) displays PRD sections with status indicators, completion percentages, and optional content.

Props:

  • section: PrdSectionData - Section data with title, content, completion percentage
  • showContent?: boolean - Whether to display section content (default: true)
  • className?: string - Additional CSS classes
  • onSectionClick?: (section) => void - Optional click handler for interactive sections

Status Indicators:

  • Not Started: Muted color, 0% completion
  • Started: Primary color, 1-99% completion
  • Complete: Green color, 100% completion

Features:

  • Intelligent content processing (removes duplicate headings)
  • Markdown content rendering with ReactMarkdown
  • Accessibility support (ARIA labels, keyboard navigation)
  • Hover states for interactive sections
  • Design system compliance with proper spacing and typography