Iryx UILayout & structure
IPageHeader
The title block at the top of a page: a heading, an optional description, and a right-aligned row of actions. Title and actions share a line from sm up and stack below it.
Invoices
Everything you have sent this year.
With a breadcrumb
The breadcrumb slot sits above the title.
INV-1042
Sent 2 March · due 14 March
Bordered
bordered draws a rule under the header, separating it from the content below.
Settings
Billing, members and integrations.
Heading level
The title renders as an <h1> by default. Drop it to 2 or 3 when the header sits inside a section that already has a heading above it.
Members
A section heading, not the page's.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The heading text |
description | string | — | A line under it |
level | 1 | 2 | 3 | 1 | Which heading element the title renders as |
bordered | boolean | — | Rule under the header |
as | string | 'header' | Element to render |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, top?, row?, heading?, title?, description?, actions? } | — | Per-slot class overrides |
Slots
| Slot | When to use it |
|---|---|
breadcrumb | Above the title |
title / description | Either needs markup — a badge beside the title, say |
actions | The right-aligned action row |
Pair it with IContainer for the measure, inside IAppShell's main region.