Page headers

Ask a question Design guidelines

Summary

The page header gives context to the content within the page. It is made up of a combination of the page title, avatar, metadata and related actions of the title. This is a strict pattern. Variation from the markup documented here is not supported.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-page-header
AMD Module key: N/A
Experimental API: 3.7
General API: 5

Examples

  1. Breadcrumbs
  2. Parent page

Page title

Code

HTML

The page header is designed to include one or more of the following elements.

  • A heading (required).
  • Breadcrumbs
  • Action buttons that should be located at the right side of the header.
  • An avatar that is located to the left.
  • A small form such as a search field.

Note:

Avatar, breadcrumb navigation and Buttons are components in their own right, combined with the Page Header wrapper.