Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/section-title

DS v4

Section titles function as identifiers for groups of elements.

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.

Static Section Title

Subtitled Section Title

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

Subtitled Section Title

Plus, guaranteed best prices.

Linked Section Title

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

Linked Section Title

See all

Section Title with Favorite

Overflow Section Title

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

Overflow Section Title

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

<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>

<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>

<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>

<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"
        type="button"
      >
        <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>