> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# Page
The frame a microfrontend page renders into — a header carrying the title and its actions, then the content below. It tells the host shell how it wants to be laid out (`fullSize`, `fixedHeight`) through context and falls back to sensible behaviour when there is no host, so the same page works inside the console and on its own.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Page) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/layout-page--overview)
```tsx
import { Badge } from '@wallarm-org/design-system/Badge';
import { Button } from '@wallarm-org/design-system/Button';
import { Page, PageActions, PageContent, PageHeader, PageTitle } from '@wallarm-org/design-system/Page';
export const Basic = () => {
return (
Page title1000
Full-featured page with header actions, tabs (including disabled), and content area.
);
};
```
## Usage
```tsx
import { Badge } from '@wallarm-org/design-system/Badge';
import { Button } from '@wallarm-org/design-system/Button';
import { Page, PageActions, PageContent, PageHeader, PageTitle } from '@wallarm-org/design-system/Page';
```
## Examples
### Sticky header
`contained` gives the page its own scroll container, which is what lets `PageHeader sticky` stick. Without it the shell does the scrolling and the header leaves with the content.
```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Page, PageActions, PageContent, PageHeader, PageTitle } from '@wallarm-org/design-system/Page';
export const StickyHeader = () => {
return (
Sticky header
{Array.from({ length: 40 }, (_, i) => (
Content row {i + 1}
))}
);
};
```
### With description and toolbar
`PageHeaderGroup` stacks the title over a `PageDescription`; `PageToolbar` adds a filter row between the header and the content.
```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { Page, PageActions, PageContent, PageDescription, PageHeader, PageHeaderGroup, PageTitle, PageToolbar } from '@wallarm-org/design-system/Page';
import { SearchInput } from '@wallarm-org/design-system/SearchInput';
import { SegmentedTabs, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';
export const WithDescriptionAndToolbar = () => {
const [search, setSearch] = useState('');
return (
Service accounts
Identities for automation and API access — they sign in with keys or tokens instead of a
password.
All 2
Active 1
Deactivated 1