Page header

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
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-page-header
AMD Module key: N/A
Experimental since: 3.7
General API status: 5.0

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.