Timer+Product
기본적으로 타이머와 상품의 조합이나 Timer+Product 전시 템플릿과 같이 타이틀이 붙는 경우 타이틀과 타이머 그룹핑을 해주기를 권장합니다.
모듈 구성
참고 링크
Astro
---import Title from "@shared/ui/title/Title.astro";import Timer from "@shared/ui/timer/Timer.astro";import Carousel from "@shared/module/carousel/Carousel.astro";import ProductUnit from "@shared/module/product-unit/ProductUnit.astro";import TextButton from "@shared/ui/button/TextButton.astro";---
<section class="v-tmpl v-tmpl--timer-product" style="margin-bottom: 0px;"> <header class="v-corner-header"> <Title level={2}>HOT DEAL</Title> <Timer class="v-countdown-timer" start="20240301120000" end="20240308120000" /> </header>
<Carousel slidesPerView={1}> <!-- ProductUnit 문서 참고 --> </Carousel></section>HTML
<!-- 권장 마크업 --><section class="v-tmpl v-tmpl--timer-product"> <header class="v-corner-header"> <h2 class="v-truncate v-title">TITLE</h2> <countdown-timer>…</countdown-timer> </header> <swiper-container> <!-- 상품 슬라이드 --> </swiper-container></section>
<!-- 여건이 여의치 않으면 아래와 같이 section, header 없어도 노출은 동일 --><h2 class="v-truncate v-title">TITLE</h2><countdown-timer>…</countdown-timer><swiper-container> <!-- 상품 슬라이드 --></swiper-container>Preview
HOT DEAL
00
:
00
:
00
