Page

┌─────────────────────────────────────────────────────┐
│ root                                                │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header                                          │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ breadcrumbs: Home / Products / Widget       │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌───────────────────────────────┐ ┌───────────┐ │ │
│ │ │ title                         │ │  actions  │ │ │
│ │ │ description                   │ │  [Edit]   │ │ │
│ │ └───────────────────────────────┘ └───────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ content                                         │ │
│ │                                                 │ │
│ │   {children}                                    │ │
│ │                                                 │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ footer (optional)                               │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

<Page
  title="Product Details"
  description="View and manage your product"
  breadcrumbs={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Widget', href: '/products/widget' },
  ]}
  actions={[
    { label: 'Edit', href: '/products/widget/edit' },
    { label: 'Delete', action: 'delete', variant: 'outline' },
  ]}
  layout="default"
>
  <Section>
    <ProductCard product={product} />
  </Section>
</Page>