Item Tile Component

Item Tile

Anatomy

An item tile includes a few main sections. The header section typically includes media of an item. It uses the file preview card component. The file preview card is a versatile component that can be used to display media along with an action button.

The body section includes three main sub-sections ( section-primary , section-secondary , section-tertiary ), each of which are always aligned to the same sections in other item tiles for easier comparative scanning.

Item Tile in Gallery View

The default view for item tile is in gallery view, which is a vertical layout. The item tile can include an image, title, subtitle, price, and other details.

Great Price

PUMA Men's Astro Kicks Sneakers

Brand new • Size 6

$29.99 Was:~~$68.99~~

Buy it now

Free shipping

Sponsored

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

Item Tile in List View

You can also implement item tile in list view, which is a horizontal layout and takes up more horizontal space. You may accomplish this by using the item-tile--list-view modifier.