The Git Project

Page Header variations

Testing the variations of the page header component

  • Persistence/absensce of the avatar/main/actions columns
  • Persistence/absensce and location (above/below) of the breadcrumbs
  • Showing the above when inside the page panel (white area)

Page Header with no avatar, breadcrumbs or actions

A bit of content to space things out

Page Header with breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with breadcrumbs before

A bit of content to space things out

Page Header with actions

A bit of content to space things out

Page Header with breadcrumbs after and actions

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with breadcrumbs before and actions

A bit of content to space things out

The Git Project

Page Header with an avatar

A bit of content to space things out

The Git Project

Page Header with avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with avatar and breadcrumbs before

A bit of content to space things out

The Git Project

Page Header with an avatar and actions

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with actions, avatar and breadcrumbs before

A bit of content to space things out

The Git Project

Page Header with actions, avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

Page Header with no avatar, breadcrumbs or actions

A bit of content to space things out

Page Header with breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with breadcrumbs before

A bit of content to space things out

Page Header with actions

A bit of content to space things out

Page Header with breadcrumbs after and actions

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with breadcrumbs before and actions

A bit of content to space things out

The Git Project

Page Header with an avatar

A bit of content to space things out

The Git Project

Page Header with avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with avatar and breadcrumbs before

A bit of content to space things out

The Git Project

Page Header with an avatar and actions

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

Page Header with actions, avatar and breadcrumbs before

A bit of content to space things out

The Git Project

Page Header with actions, avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

H2 Page Header with no avatar, breadcrumbs or actions

A bit of content to space things out

H2 Page Header with breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with breadcrumbs before

A bit of content to space things out

H2 Page Header with actions

A bit of content to space things out

H2 Page Header with breadcrumbs after and actions

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with breadcrumbs before and actions

A bit of content to space things out

The Git Project

H2 Page Header with an avatar

A bit of content to space things out

The Git Project

H2 Page Header with avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with avatar and breadcrumbs before

A bit of content to space things out

The Git Project

H2 Page Header with an avatar and actions

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with actions, avatar and breadcrumbs before

A bit of content to space things out

The Git Project

H2 Page Header with actions, avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

H2 Page Header with no avatar, breadcrumbs or actions

A bit of content to space things out

H2 Page Header with breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with breadcrumbs before

A bit of content to space things out

H2 Page Header with actions

A bit of content to space things out

H2 Page Header with breadcrumbs after and actions

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with breadcrumbs before and actions

A bit of content to space things out

The Git Project

H2 Page Header with an avatar

A bit of content to space things out

The Git Project

H2 Page Header with avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with avatar and breadcrumbs before

A bit of content to space things out

The Git Project

H2 Page Header with an avatar and actions

A bit of content to space things out

The Git Project
  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

H2 Page Header with actions, avatar and breadcrumbs before

A bit of content to space things out

The Git Project

H2 Page Header with actions, avatar and breadcrumbs after

  1. Breadcrumb
  2. Breadcrumb
  3. Breadcrumb

A bit of content to space things out