Page Header Component

Simple — full

<PageHeader Title="Team members"
            SupportingText="Manage your team members and their account permissions here.">
    <Breadcrumbs>
        <Breadcrumb Collapsed="true" ShowHomeIcon="true" Items="@breadcrumbItems" />
    </Breadcrumbs>
    <Actions>
        <Button Variant="tertiary"  Text="Tertiary" />
        <Button Variant="secondary" Text="Secondary" />
        <Button Variant="primary"   Text="Primary" />
    </Actions>
    <Search>
        <InputField Placeholder="Search">
            <LeadingIcon><svg>...search icon...</svg></LeadingIcon>
        </InputField>
    </Search>
</PageHeader>

Simple — title + actions

<PageHeader Title="Team members"
            SupportingText="Manage your team members and their account permissions here.">
    <Actions>
        <Button Variant="secondary" Text="Secondary" />
        <Button Variant="primary"   Text="Primary" />
    </Actions>
</PageHeader>

Simple — title only

<PageHeader Title="Settings"
            SupportingText="Manage your account settings and preferences." />

Avatar — full

<PageHeader Title="Olivia Rhye"
            SupportingText="olivia@untitledui.com"
            AvatarSrc="/avatars/olivia.jpg">
    <Breadcrumbs>
        <Breadcrumb Collapsed="true" Items="@breadcrumbItems" />
    </Breadcrumbs>
    <Actions>
        <Button Variant="secondary" Text="Edit profile" />
        <Button Variant="primary"   Text="Save changes" />
    </Actions>
</PageHeader>

Avatar — title + actions

<PageHeader Title="Olivia Rhye"
            SupportingText="olivia@untitledui.com"
            AvatarSrc="/avatars/olivia.jpg">
    <Actions>
        <Button Variant="secondary" Text="Edit profile" />
        <Button Variant="primary"   Text="Save changes" />
    </Actions>
</PageHeader>