Section Title Component

Static Section Title

The standard, static section title is designed to support a single line on desktop and wrap only when displayed on narrow screens such as mWeb or native.

<div class="section-title">
  <div class="section-title__title-container">
    <h2 class="section-title__title">Static Section Title</h2>
  </div>
</div>

Subtitled Section Title

The subtitle is designed to support any additional information. This text should be concise and fit onto a single line.

<div class="section-title">
  <div class="section-title__title-container">
    <h2 class="section-title__title">Subtitled Section Title</h2>
    <span class="section-title__subtitle"> Plus, guaranteed best prices. </span>
  </div>
</div>

Linked Section Title

An arrow icon gives visual affordance that the title is a link. A linked section title can also have a subtitle.

<div class="section-title">
  <div class="section-title__title-container">
    <h2 class="section-title__title">Linked Section Title</h2>
  </div>
  <a class="section-title__cta" href="https://www.ebay.com"> Link </a>
</div>

Section Title with Favorite

<div class="section-title">
  <div class="section-title__title-container">
    <h2 class="section-title__title">Section Title with Favorite</h2>
  </div>
  <div class="section-title__info">
    <span class="infotip">
      <button
        class="icon-btn"
        type="button"
        aria-expanded="false"
        aria-label="Help"
      >
        <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
          <use href="#icon-heart-16" />
        </svg>
      </button>
    </span>
  </div>
</div>

Overflow Section Title

The optional overflow control can house less frequently accessed controls, (e.g., personalization feedback).

<div class="section-title">
  <div class="section-title__title-container">
    <h2 class="section-title__title">Overflow Section Title</h2>
  </div>
  <div class="section-title__overflow">
    <span class="menu-button">
      <button
        class="menu-button__button icon-btn"
        type="button"
        aria-expanded="false"
        aria-haspopup="true"
        aria-label="Options"
      >
        <svg class="icon icon--16" width="3" height="13" aria-hidden="true">
          <use href="#icon-overflow-vertical-16" />
        </svg>
      </button>
      <div class="menu-button__menu menu-button__menu--reverse">
        <div class="menu-button__items" role="menu">
          <div class="menu-button__item" role="menuitem">
            <span> Item 1 </span>
          </div>
          <div class="menu-button__item" role="menuitem">
            <span> Item 2 </span>
          </div>
          <div class="menu-button__item" role="menuitem">
            <span> Item 3 </span>
          </div>
        </div>
      </div>
    </span>
  </div>
</div>