Design · c5

Patterns Page

archivedcreated 2026-09-11· last activity 2026-09-11

Why

c4 extracted 6 content/layout components from www.qpoint.io into the layer and documented them individually. But individual component demos don't show how these components compose together — the real value. www.qpoint.io uses 3 dominant compositional patterns 20+ times across its pages. This cycle makes those patterns visible and copyable in the design site.

Objective

Add a /patterns page to the design site that showcases 3 live-rendered compositional patterns with copyable MDC code.

Scope

Single /patterns page with 3 pattern showcases
Local PatternCard component for consistent layout
Nav + homepage updates

Patterns

Pattern	Components
Feature Grid	`ContentSectionHeadline` + `LayoutGrid` + `ContentBigPoint`
Process Steps	`ContentStepWrapper` + `ContentStep`
Section Template	`ContentSectionHeadline` + `LayoutGrid` + `ContentCheck`

Key Changes

app/components/PatternCard.vue — showcase wrapper with slots + code prop + copy button
app/pages/patterns.vue — the page with 3 live examples
app/components/AppNav.vue — added Patterns link
app/pages/index.vue — added Patterns card

Outcome

Patterns are visible and copyable. Anyone building a new Qpoint page can grab the MDC skeleton and adapt the content.

Visual record

1 captures — heroes, page slices, and full-page renders. Click to view.