Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • D design
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 21
    • Issues 21
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 16
    • Merge requests 16
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Primer
  • design
  • Merge requests
  • !408

Page header docs

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Emily Brick requested to merge page-header-docs into main 2 years ago
  • Overview 23
  • Commits 20
  • Pipelines 0
  • Changes 2

Closes https://github.com/github/primer/issues/1859

Add Page header usage guidelines to docs

Compare
  • main (base)

and
  • latest version
    57940782
    20 commits, 2 years ago

2 files
+ 297
- 0

    Preferences

    File browser
    Compare changes
content/c‎omponents‎
page-he‎ader.mdx‎ +295 -0
src/@primer/gats‎by-theme-doctocat‎
nav‎.yml‎ +2 -0
content/components/page-header.mdx 0 → 100644
+ 295
- 0
  • View file @ 57940782

  • Edit in single-file editor

  • Open in Web IDE


---
title: Page header
reactId: drafts_page_header
description: Page header determines the top-level headings of a UI.
figma: https://www.figma.com/file/Ee0OrXuOLXMDqUW83EnDHP/PageHeader-(FY23-Q1)?node-id=0%3A1&t=8cKRbkNYhwbqEoHj-1
---
import {Box, Text} from '@primer/react'
import ComponentLayout from '~/src/layouts/component-layout'
export default ComponentLayout
## Usage
The page header arranges elements that apply context and provide navigation for the current page.
The elements within Page header are rearranged and displayed accordingly depending on the [viewport size](/foundations/layout#viewport-ranges) and context of the page.
<img
src="https://user-images.githubusercontent.com/586552/222194474-74b72ae3-f8d4-4336-9a2c-9d5c18d91c42.png"
role="presentation"
width="960"
alt="Page header component"
/>
## Anatomy
Page header can include a context bar, title bar, description, and contextual navigation (pertaining to the current page).
By default, the [context bar](#context-bar) is visible on narrow viewports only, the [title bar](#title-bar) is visible on all viewports, and the back button and trailing action are visible on regular viewports.
<img
src="https://user-images.githubusercontent.com/586552/221939296-410d3b17-ccbb-48ae-b1cf-c3a8cdcfcaa5.png"
role="presentation"
width="993"
alt="Page header anatomy"
/>
## Context bar
The context bar is intended to set context for the user on smaller viewports and provide any actions that fit within the context bar. As a reminder, by default, the context bar (including its actions) is only visible on narrow viewports.
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Parent link
</Text>
<Text as="p" mt="0">
The default way to let users navigate up in the hierarchy on narrow viewports.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194471-dfc56e9a-a2ab-48a0-8a04-41ebb5ec4adf.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Context bar actions
</Text>
<Text as="p" mt="1">
Actions that appear in the context bar specifically.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194470-da8126b8-72c5-4078-968e-ebc5c2bf3140.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Context bar area
    • Mike Perrotti
      Mike Perrotti @mperrotti · 2 years ago
      Contributor

      I consider this whole thing the "context bar area". I'm having a hard time coming up with a better name though...

      "Navigation control area"? "Navigation content"? :shrug:‍♂️

      • Please register or sign in to reply
Please register or sign in to reply
</Text>
<Text as="p" mt="0">
The context bar is a generic slot for any component above the title region.
Use it for custom breadcrumbs and other navigation elements instead of parent link.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194469-85131849-4a7a-41e6-abca-040d042110df.png"
    • Mike Perrotti
      Mike Perrotti @mperrotti · 2 years ago
      Contributor

      The first example in this image is a little confusing because it's just placeholder content. The other example only highlight "real" content.

      • Please register or sign in to reply
Please register or sign in to reply
role="presentation"
width="456"
/>
</Box>
## Title bar
The title bar can include a static page title, actions, and leading and trailing visuals.
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Default title variant
</Text>
<Text as="p" mt="0">
Most common page title size. Use for static titles in most situations.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194467-1031b33b-81e7-429b-9201-d154fd7e9d59.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
    • Mike Perrotti
      Mike Perrotti @mperrotti · 2 years ago
      Contributor

      So this title is also a link? It's not really clear in the example image. It just looks like this is the "default" text size/style for the title.

      • Emily Brick
        Emily Brick @emilybrick · 2 years ago
        Author Contributor

        Whooops nvm. This is copy pasta typo.

      • Please register or sign in to reply
Please register or sign in to reply
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Large title variant
</Text>
<Text as="p" mt="0">
Use large for for user-generated content such as issues, pull requests, or discussions.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194464-6c477db6-bb11-445e-b27e-41a0c7267758.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Subtitle variant
</Text>
<Text as="p" mt="0">
Use subtitle when a title is already present in the page, such as in a Split page layout.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222215097-79bb0d77-af5c-4199-81a1-65d98a7a0556.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Leading visual
</Text>
<Text as="p" mt="0">
Leading visuals are optional and appear at the start of the title. They can be octicons, avatars, and other custom visuals that fit a small area. Leading visuals remain visible on all viewports.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194458-922bd3bf-475d-4d76-97a1-bd8cda6af6f5.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Trailing visual
</Text>
<Text as="p" mt="0">
Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, privacy details, etc. Trailing visuals remain visible on all viewports.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194459-daf8c4b8-0452-40a2-bdf3-2b74be06e7ef.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Leading action
</Text>
<Text as="p" mt="0">
A back button can be used as a leading action for local navigation. On narrow viewports, use parent link instead.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222503965-dc2d7727-6a45-402a-abb0-948a58866017.png"
role="presentation"
width="456"
/>
</Box>
<Box
as="figure"
display="flex"
alignItems="flex-start"
justifyContent="space-between"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Box as="figcaption" mt="1">
<Text as="h3" fontSize={2} m={0}>
Trailing action
</Text>
<Text as="p" mt="0">
Trailing action can display subtler actions aligned directly next to the title. On narrow viewports, replace the trailing action with an item in an overflow button.
</Text>
</Box>
<img
src="https://user-images.githubusercontent.com/586552/222194453-0f3e29b8-28cb-4623-8039-f546e1ae6622.png"
role="presentation"
width="456"
/>
</Box>
src/@primer/gatsby-theme-doctocat/nav.yml
+ 2
- 0
  • View file @ 57940782

  • Edit in single-file editor

  • Open in Web IDE


@@ -166,6 +166,8 @@
url: /components/heading
- title: Icon
url: /components/icon
- title: Page header
url: /components/page-header
- title: Segmented control
url: /components/segmented-control
- title: Toggle switch
0 Assignees
None
Assign to
3 Reviewers
Josep Martins's avatar
Josep Martins
Emily Brick's avatar
Emily Brick
Mike Perrotti's avatar
Mike Perrotti
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
6
6 participants
Mike Perrotti
Emily Brick
Josep Martins
Administrator
Cole Bemis
Ghost User
Reference: primer/design!408
Source branch: page-header-docs

Menu

Explore Projects Groups Snippets