상품 유닛

HTML

<div class="v-product-unit">
  <div class="v-product-unit__media-grid">
    <a href="/link/to/product" class="v-product-unit__link">
      <!-- 이미지 영역 딤처리 클래스: "v-media-embed--dim" -->
      <div class="v-media-embed v-media-embed--dim v-product-unit__media">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
          width="350"
          height="525"
        />
      </div>
    </a>

    <!-- 찜하기 -->
    <div class="v-product-unit__top-right">
      <!-- 찜상태: "on" 클래스 추가 -->
      <button
        title="찜하기"
        data-command="toggleWish"
        type="button"
        class="v-button v-wish-button v-product-unit__wish-button on"
      >
        <svg fill="none" viewBox="0 0 24 24">
          <path
            stroke="currentColor"
            stroke-miterlimit="10"
            d="M19.658 5.587a4.475 4.475 0 0 0-6.478 0L12 6.806l-1.18-1.22a4.475 4.475 0 0 0-6.478 0c-1.79 1.85-1.79 4.847 0 6.697L12 20.2l7.658-7.916c1.79-1.85 1.79-4.847 0-6.696Z"
          ></path>
        </svg>
      </button>
    </div>
    <!-- /찜하기 -->

    <!-- 랭킹 -->
    <div class="v-product-unit__bottom-left">
      <span class="v-product-unit__rank">01</span>
    </div>
    <!-- /랭킹 -->

    <!-- 상품 옵션 -->
    <div class="v-product-unit__overlay">
      <div class="v-product-unit__overlay__content">
        <ul class="v-product-unit__options">
          <li>옵션 A</li>
          <li>옵션 B</li>
          <li>옵션 C</li>
        </ul>
      </div>
    </div>
    <!-- /상품 옵션 -->
  </div>

  <a href="/link/to/product" class="v-product-unit__link">
    <div class="v-product-unit__content">
      <!--
      브랜드명, 상품명 줄 수 제한/말줄임 클래스. 요건에 맞춰 적용해주세요.
      - `v-truncate`: 1줄
      - `v-line-clamp-2`: 2줄
      - `v-line-clamp-${n}`: n줄
      -->
      <div class="v-line-clamp-2 v-product-unit__brand">BRAND NAME</div>
      <div class="v-line-clamp-2 v-product-unit__name">PRODUCT NAME</div>

      <div class="v-product-unit__price-group">
        <span class="v-product-unit__price">299,000</span>
        <span class="v-product-unit__discount">20%</span>
      </div>

      <div class="v-product-unit__ratings">
        <!-- 별점 영역. TBD -->
      </div>

      <div class="v-product-unit__tags">
        <span class="v-product-unit__tag">EXCLUSIVE</span>
        <span class="v-product-unit__tag">메가캠페인</span>
      </div>

      <div class="v-product-unit__keywords">
        <span class="v-product-unit__keyword">신상</span>
        <span class="v-product-unit__keyword">기프트</span>
        <span class="v-product-unit__keyword">도착보장</span>
      </div>
    </div>
  </a>
</div>
Preview
