Page Header - BreakthroughT1D Design

Overview & Usage

The Page Header component introduces key information at the top of a page. It provides two variations:

Default Variation: Used for general pages without metadata, including only a title, description, and breadcrumbs.
Post Variation: Primarily used for posts, it includes metadata such as publication date and categories in addition to the title and breadcrumbs.

Both variations are designed to maintain consistency across pages, offering clear and structured content for users. The component also integrates the Breadcrumbs component to provide navigational context for users.

1. Example & HTML Structure

Default Variation (for general pages):

<div class="bt1d-page-header">
  <div class="bt1d-page-header__inner-container">

    <div class="bt1d-breadcrumbs">
      <div class="bt1d-breadcrumbs__inner">
        <span class="bt1d-breadcrumbs__item">
          <a class="bt1d-breadcrumbs__link" href="https://example.com/">Home</a>
        </span>
        <span class="bt1d-breadcrumbs__separator"></span>
        <span class="bt1d-breadcrumbs__item">
          <a class="bt1d-breadcrumbs__link" href="https://example.com/news-and-updates/">News and Updates</a>
        </span>
        <span class="bt1d-breadcrumbs__separator"></span>
        <span class="bt1d-breadcrumbs__item" aria-current="page">Two Highly Engaged Volunteer Leaders Elected to Head Breakthrough T1D International Board of Directors</span>
      </div>
    </div>

    <div class="bt1d-page-header__content">
      <h1 class="bt1d-page-header__title">Two Highly Engaged Volunteer Leaders Elected to Head Breakthrough T1D International Board of Directors</h1>
      <div class="bt1d-page-header__description">Incididunt pariatur eu sunt minim eu et magna aliquip dolore laborum.</div>
    </div>
  </div>
</div>

Post Variation (with metadata):

<div class="bt1d-page-header">
  <div class="bt1d-page-header__inner-container">

    <div class="bt1d-breadcrumbs">
      <div class="bt1d-breadcrumbs__inner">
        <span class="bt1d-breadcrumbs__item">
          <a class="bt1d-breadcrumbs__link" href="https://example.com/">Home</a>
        </span>
        <span class="bt1d-breadcrumbs__separator"></span>
        <span class="bt1d-breadcrumbs__item">
          <a class="bt1d-breadcrumbs__link" href="https://example.com/news-and-updates/">News and Updates</a>
        </span>
        <span class="bt1d-breadcrumbs__separator"></span>
        <span class="bt1d-breadcrumbs__item" aria-current="page">Two Highly Engaged Volunteer Leaders Elected to Head Breakthrough T1D International Board of Directors</span>
      </div>
    </div>

    <div class="bt1d-page-header__content">
      <h1 class="bt1d-page-header__title">Two Highly Engaged Volunteer Leaders Elected to Head Breakthrough T1D International Board of Directors</h1>
      <div class="bt1d-page-header-meta">
        <time class="page-header-meta__date">March 13, 2024</time>
        <div class="page-header-meta__category">
          <span class="page-header-meta__category-label">Read more in:</span>
          <ul class="page-header-meta__category-list">
            <li class="page-header-meta__category-list-item">
              <a class="page-header-meta__category-link" href="https://example.com/news-and-updates/?topic=advocacy">Advocacy</a>
            </li>
            <!-- Additional categories here -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

2. Key Classes

bt1d-page-header: The main wrapper for the Page Header component.
bt1d-page-header__inner-container: Wraps the entire content within the Page Header.
bt1d-page-header__content: Contains the title and description (in the default variation) or title and metadata (in the post variation).
bt1d-page-header__title: The class for the main title displayed on the page.
bt1d-page-header__description: The class for the description text, which is used in the default variation for general pages.
bt1d-page-header-meta: The wrapper for the metadata section, including the date and category information (for posts).
page-header-meta__date: The class for displaying the publication date (used in the post variation).
page-header-meta__category: The class for the category section (used in the post variation).
page-header-meta__category-list: The wrapper for the list of categories (used in the post variation).
page-header-meta__category-list-item: Represents an individual category within the list.

Need Help?

If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.

get in touch