# Page headers
> Page header layouts with a title, a pretitle, breadcrumbs, meta information and action buttons.
Ready-to-use page header examples with titles, subtitles, breadcrumbs, and action buttons for consistent page layouts.
Source: https://docs.tabler.io/ui/layout/page-headers
---
## Simple header
Use the `.page-header` class to combine a pretitle, a page title, and action buttons in one row. The primary action collapses to an icon-only button on small screens.
```html
```
## With meta, avatar and actions
Add an [avatar](/ui/components/avatar) and a `.page-subtitle` block with meta information to introduce a profile page. Icons and links in the subtitle give users quick context about the person or item.
```html
```
## With meta, search and actions
Combine the page title with a result count, a search input, and a primary action. The search field hides on small screens to save space.
```html
```
## Bordered header
Add `page-header-border` to draw a line under the header, which separates it from the content below.
```html
```
## Header with breadcrumb and actions
A [breadcrumb](/ui/components/breadcrumb) above the title shows where the page sits in the hierarchy, and the actions on the right hold the tasks for this page, such as adding or editing an item.
```html
```
## Accessibility
- The page title belongs in an `h1`, and there should be exactly one per page. `page-title` is a style, not a heading.
- The pretitle is context, not a heading. Keep it a `div` so it does not break the heading order.
- Buttons in `page-header` come after the title in the markup even when they sit to its right. That is the order they should be read in.
- An icon-only action needs an `aria-label`.
- A search field in the header needs a label. When the design has no room, use `aria-label` and `type="search"`.