Section Header Component

Team members

Manage your team members and their account permissions here.

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

Team members

Manage your team members and their account permissions here.

<SectionHeader Title="Team members"
               SupportingText="Manage your team members and their account permissions here.">
    <Actions>
        <InputField Placeholder="Search">
            <LeadingIcon><svg>...search icon...</svg></LeadingIcon>
        </InputField>
    </Actions>
</SectionHeader>

Team members

Manage your team members and their account permissions here.

<SectionHeader Title="Team members"
               SupportingText="..."
               ShowDropdownIcon="true">
    <Actions>
        <ButtonGroup Items="bgItems" @bind-SelectedValue="bgSelected" />
    </Actions>
</SectionHeader>

Team members

Manage your team members and their account permissions here.

<SectionHeader Title="Team members"
               SupportingText="..."
               Tabs="settingsTabs"
               @bind-ActiveTab="activeTab">
    <Actions>
        <Button Variant="primary" Text="Primary" />
    </Actions>
</SectionHeader>

@code {
    private string activeTab = "my-details";

    private List<SectionHeader.SectionTab> settingsTabs = new()
    {
        new() { Label = "My details", Value = "my-details" },
        new() { Label = "Profile",    Value = "profile" },
        new() { Label = "Password",   Value = "password" },
    };
}

Team members

<SectionHeader Title="Team members" />

Team members

Manage your team members and their account permissions here.

<SectionHeader Title="Team members"
               SupportingText="Manage your team members here."
               ShowDivider="false">
    <Actions>
        <Button Variant="primary" Text="Save changes" />
    </Actions>
</SectionHeader>

Section Header Component

With buttons

Team members

With search

Team members

With button group

Team members

With buttons + tabs

Team members

Minimal (title only)

Team members

No divider

Team members