Components

Page header

The row a page opens with: its title, a line under it, what the page can do at the end of the row, and the trail above. Not one of Flux UI's components: the kit's own, laid out as Flux's demos lay out a heading and its actions, with Flux's heading, text, breadcrumbs and buttons.

A list page

Heading("Suppliers") is the page's h1; Subheading is the line under it and Breadcrumbs the trail above. The children are the actions, at the end of the row, 8px apart; on a phone the title takes the whole line and they go under it. The header keeps no room around itself: the page puts Class("mb-6") on it. A page of its own, framed, because the header is its page's one h1.

PageHeaderExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

// A list page: the trail, its title and a line under it, what the page can do at the end of the row, then the list.
// The header keeps no room around itself; the page puts 24px under it.
public sealed partial class PageHeaderExample : Component
{
    protected override Component? Render() =>
        Div.Class("p-6 lg:p-8")[
            Ui.PageHeader.Heading("Suppliers").Subheading("Everyone you buy fuel and parts from.").Class("mb-6")
                .Breadcrumbs(Ui.Breadcrumbs[Ui.BreadcrumbsItem.Href(Routes.UiIntroductionPage())["Home"], Ui.BreadcrumbsItem["Suppliers"]])[
                Ui.Button.Key("export").Icon(Ui.IconName.ArrowDownTray)["Export"],
                Ui.Button.Key("new").Primary.Icon(Ui.IconName.Plus).Href(Routes.UiFormButtonsPage())["New supplier"]
            ],
            Ui.Table.ContainerClass("min-w-0")[
                Ui.TableColumns[Ui.TableColumn["Supplier"], Ui.TableColumn["City"]],
                Ui.TableRows[
                    Ui.TableRow.Key("aminoff")[Ui.TableCell.Variant(Ui.TableCellVariant.Strong)["Aminoff Freight"], Ui.TableCell["Oslo"]],
                    Ui.TableRow.Key("bothman")[Ui.TableCell.Variant(Ui.TableCellVariant.Strong)["Bothman & Sons"], Ui.TableCell["Leeds"]]
                ]
            ]
        ];
}

Live result

Fullscreen

A title alone

A form's page needs only its title, and the room under it is the page's: mb-8 here.

PageHeaderTitleExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

// A form's page: the title alone, nothing at the end of the row, and the form 32px under it — the page's choice.
public sealed partial class PageHeaderTitleExample : Component
{
    protected override Component? Render() =>
        Div.Class("p-6 lg:p-8")[
            Ui.PageHeader.Heading("New supplier").Class("mb-8"),
            Div.Class("grid max-w-sm gap-6")[
                Ui.Input.Value("Aminoff Freight").Label("Name"),
                Ui.Input.Value("Oslo").Label("City")
            ]
        ];
}

Live result

Fullscreen

Reference

`Ui.PageHeader`

not in Flux UI

A page's title row: the h1, a line under it, the trail above and, as its children, the actions at the end.

Step	Takes	What it does
`.Heading(…)`	text: Ui.PageHeader.Heading("Suppliers")	The page's title, its h1 in the extra large size. Required, and taken first.
`.Subheading(…)`	`string`	A line under the title, in the muted ink.
`.Breadcrumbs(…)`	a Ui.Breadcrumbs	The trail to this page, above the title.