CSS
Menu

Pagehead

StableFor GitHub internal use only

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

Table of Contents

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

Repohead

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

Base

Private

Edit this page on GitHub