Skip to content
SHINSEGAE V UI

Timer+Product

샘플 페이지

HOT DEAL

00 : 00 : 00
BRAND NAME
1 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
2 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
3 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
4 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
5 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000 
<!-- 전시 템플릿 간 여백은 style 속성으로 조정 -->
<section class="v-tmpl v-tmpl--timer-product" style="margin-bottom: 48px;">
  <header class="v-corner-header">
    <h2 class="v-truncate v-title">HOT DEAL</h2>
    <script type="module">
      if (!window.customElements.get("countdown-timer")) {
        import("/ui/element/countdown-timer.js");
      }
    </script>


    <countdown-timer
      start="20240301120000"
      end="20240308120000"
      class="v-countdown-timer"
    >
      <div data-timer="" class="active">
        <span data-timer-hours="">00</span>
        :
        <span data-timer-minutes="">00</span>
        :
        <span data-timer-seconds="">00</span>
      </div>
    </countdown-timer>
  </header>


  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>


  <swiper-container
    space-between="24"
    slides-per-view="3"
    slides-per-group="3"
    navigation="true"
    pagination="true"
    class="v-carousel"
  >
    <swiper-slide>
      <!-- 상품 유닛 -->
      <div class="v-product-unit">
        <div class="v-product-unit__media-grid">
          <a href="/link/to/page" class="v-product-unit__link">
            <div
              class="v-media-embed v-media-embed--dim v-product-unit__media"
              alt=""
            >
              <img
                class="v-media-embed__element v-media-embed__image"
                src="/path/to/image.jpg"
                alt=""
                width="375"
                height="562"
              />
            </div>
          </a>
        </div>
        <a href="/link/to/page" class="v-product-unit__link">
          <div class="v-product-unit__content">
            <div class="v-product-unit__brand">STUDIO TOMBOY</div>
            <div class="v-line-clamp-2 v-product-unit__name">
              레더 블루종 자켓
            </div>
            <div class="v-product-unit__price-group">
              <span class="v-product-unit__price">299,000</span>
            </div>
          </div>
        </a>
      </div>
      <!-- 상품 유닛 -->
    </swiper-slide>


    <div slot="container-end">
      <div class="v-carousel_slot_end">
        <button
          type="button"
          class="v-button v-button--outlined v-button--full"
        >
          BUTTON
        </button>
      </div>
    </div>
  </swiper-container>
</section>