# Page Header
[component-header:sl-page-header]

Page headers are used in top of a view.

It is used as a generic top bar for standardized views. It ensures that actions, title etc. are placed in the same locations from view to view.

## A list view with filters

When listing data with the need to filter among it the page header can be displayed with buttons for that purpose.

```html preview
<sl-page-header header="Orders" style="border:1px solid var(--sl-panel-border-color)">
    <div slot="actions" style="box-sizing: border-box">
        <sl-dropdown placement="bottom-end">
            <sl-button size="small" slot="trigger">
                <sl-icon slot="prefix" name="funnel-fill"></sl-icon>
                Filters
                <sl-badge pill>4</sl-badge>
            </sl-button>
            <sl-menu>
                <sl-menu-item>Filter 1</sl-menu-item>
                <sl-menu-item>Filter 2</sl-menu-item>
                <sl-menu-item>Filter 3</sl-menu-item>
                </sl-menu-item>
            </sl-menu>
        </sl-dropdown>

        <sl-button size="small" type="primary" style="margin-left: var(--sl-spacing-small)">Create</sl-button>
</sl-page-header>

```

## Multiple presentations

Sometimes data can be represented in multiple ways.

```html preview
<sl-page-header header="Orders" style="border:1px solid var(--sl-panel-border-color)">
    <div slot="actions" style="box-sizing: border-box">
        <sl-button-group label="Alignment">
            <sl-tooltip content="Grid overview">
                <sl-button size="small"><sl-icon name="grid-3x2-gap-fill"></sl-icon></sl-button>
            </sl-tooltip>
            <sl-tooltip content="Calendar overview">
                <sl-button size="small"><sl-icon name="calendar2-range"></sl-icon></sl-button>
            </sl-tooltip>
            <sl-tooltip content="List overview">
                <sl-button size="small"><sl-icon name="list"></sl-icon></sl-button>
            </sl-tooltip>
        </sl-button-group>
</sl-page-header>

```

[component-metadata:sl-page-header]