Product 1
모듈 구성
<!-- 전시 템플릿 간 여백은 style 속성으로 조정 --><section class="v-tmpl v-tmpl--product-1" style="margin-bottom: 48px;"> <h2 class="v-truncate v-title">Title</h2> <script type="module"> if (!window.customElements.get("swiper-container")) { import("/ui/lib/swiper/swiper-element-customized-bundle.min.js"); } </script> <swiper-container space-between="8" slides-per-view="2" slides-per-group="2" 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"> <img class="v-media-embed__element v-media-embed__image" src="/path/to/image.jpg" alt="" width="350" height="525" /> </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">BRAND NAME</div> <div class="v-product-unit__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 </div> <div class="v-product-unit__price-group"> <span class="v-product-unit__price">000,000</span> </div> </div> </a> </div> <!-- /상품 유닛 --> </swiper-slide> <!-- … --> </swiper-container></section>