Pagehead

Give a page a clear, separated title and optional top nav by adding a .pagehead.

Basic pagehead

In its simplest form, you can build a pagehead with a pagehead element with an h1 child.

Avatars

Place an avatar inside the h1 to have margins applied to it. Don't forget the avatar class!

Also be sure to add aria-hidden="true" to hide the avatar from screenreaders.

<div class="pagehead">
<h1>
<%= avatar_for("jonrohan", 32, "aria-hidden": "true") %>
jonrohan
</h1>
</div>

Path divider

For path or breadcrumb patterns, wrap the / with path-divider to add some nice horizontal spacing.

Pagehead actions

To add actions on the right side of the pagehead, use the pagehead-actions element. Place pagehead-actions before the h1 to ensure proper placement.

Org nav

SyntaxError: Unexpected token (14:9)
10 :         className="pagehead-tabs-item selected"
11 :         href="#url"
12 :       >
13 :         {'      '}
14 :         <%=
              ^

Repohead

Use pagehead to construct a header and navigation for a repository.

Base

SyntaxError: Unexpected token (18:15)
14 :               href="#url"
15 :               role="button"
16 :             >
17 :               {'            '}
18 :               <%= octicon("eye")%="">
                    ^

Private

SyntaxError: Unexpected token (18:15)
14 :               href="#url"
15 :               role="button"
16 :             >
17 :               {'            '}
18 :               <%=
                    ^
Edit this page on GitHub
1 contributorcolebemis
Last edited by colebemis on August 12, 2019