Basic
Dashboard
Page content goes here.
With Subtitle
Items
Browse and manage all items
Page content goes here.
With Actions
Items
Browse and manage all items
Item Alpha
ActiveCategory A
Item Beta
ActiveCategory B
Item Gamma
ArchivedCategory A
Empty State
Items
Browse and manage all items
Nothing here yet
Props
| Prop | Type | Description |
|---|---|---|
| title | string | Page heading displayed in the header. Required. |
| subtitle | string | Secondary text below the title. |
| actions | ReactNode | Slot rendered to the right of the title (e.g. buttons). |
| children | ReactNode | Main content rendered below the header. |
| className | string | Additional classes on the root element. |
Usage
<SimplePage
title="Items"
subtitle="Browse and manage all items"
actions={<Button>+ New Item</Button>}
>
<CardGrid columns={3}>
{items.map(item => (
<Card key={item.id} variant="interactive">
<Card.Header>
<h3>{item.title}</h3>
<Badge variant="success">Active</Badge>
</Card.Header>
<Card.Body>
<p>{item.detail}</p>
</Card.Body>
</Card>
))}
</CardGrid>
</SimplePage>