Item Tile Group Component

Set of Grid View Item Tiles

<div class="item-tile-group layout-grid">
  <ul>
    <li>
      <div class="item-tile">
        <div class="item-tile__header">
          <div class="file-preview-card">
            <div class="file-preview-card__body">
              <a href="https://ebay.com">
                <img
                  class="file-preview-card__asset"
                  src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg"
                  alt="Puma..."
                />
              </a>
              <button
                class="icon-btn file-preview-card__action"
                type="button"
                aria-label="Open menu"
              >
                <svg
                  class="icon icon--16"
                  height="16"
                  width="16"
                  aria-hidden="true"
                >
                  <use href="#icon-heart-16" />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="item-tile__body">
          <div class="item-tile__section-primary">
            <span class="signal signal--trustworthy"> Great Price </span>
          </div>
          <div class="item-tile__section-secondary">
            <a href="https://ebay.com" class="item-tile__title">
              PUMA Men's Astro Kicks Sneakers
            </a>
            <div class="item-tile__subtitle">Brand new &bull; Size 6</div>
          </div>
          <div class="item-tile__section-tertiary">
            <p>
              $29.99
              <span class="clipped"> Was: </span>
              <s class="item-tile__list-price"> $68.99 </s>
            </p>
            <p>
              <a href="https://ebay.com"> Buy it now </a>
            </p>
            <p>Free shipping</p>
            <p>Sponsored</p>
          </div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Set of List View Item Tiles

To use a set of List Layout Item Tiles in a layout, you can use the layout-grid component with the specific responsive display rules per specifications. This will ensure proper spacing of Item Tiles in relation to each other and maintain the horizontally-oriented Item Tiles stacked across all breakpoints until it hits the xl breakpoint, where it displays two Item Tiles per row.

<div class="item-tile-group item-tile-group--list-view layout-grid">
  <ul>
    <li>
      <div class="item-tile item-tile--list-view">
        <div class="item-tile__header">
          <div class="file-preview-card">
            <div class="file-preview-card__body">
              <a href="https://ebay.com">
                <img
                  class="file-preview-card__asset"
                  src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg"
                  alt="Puma..."
                />
              </a>
              <button
                class="icon-btn file-preview-card__action"
                type="button"
                aria-label="Open menu"
              >
                <svg
                  class="icon icon--16"
                  height="16"
                  width="16"
                  aria-hidden="true"
                >
                  <use href="#icon-heart-16" />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="item-tile__body">
          <div class="item-tile__section-primary">
            <span class="signal signal--trustworthy"> Great Price </span>
          </div>
          <div class="item-tile__section-secondary">
            <a href="https://ebay.com" class="item-tile__title">
              PUMA Men's Astro Kicks Sneakers
            </a>
            <div class="item-tile__subtitle">Brand new &bull; Size 6</div>
          </div>
          <div class="item-tile__section-tertiary">
            <p>
              $29.99
              <span class="clipped"> Was: </span>
              <s class="item-tile__list-price"> $68.99 </s>
            </p>
            <p>
              <a href="https://ebay.com"> Buy it now </a>
            </p>
            <p>Free shipping</p>
            <p>Sponsored</p>
          </div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>