Img(1)+Text(안)+Product(피카부)

샘플 페이지

 <section class="v-tmpl v-tmpl--img-text-1">
 <section class="v-tmpl v-tmpl--img-1-text-in-product-peakaboo">
  <h2 class="v-truncate v-title">TITLE</h2>
  <div class="v-banner-product">
    <div class="v-banner-product__banner">
      <div class="v-media-banner v-media-banner--layered v-media_aspect_default v-side-margin">
      <div class="v-media-banner v-media-banner--layered v-media-banner--hero v-side-margin">
        <div class="v-media-banner__media">
          <a href="/path/to/link">
            <div class="v-media-embed v-media-embed--dim">
              <img
                class="v-media-embed__element v-media-embed__image"
                src="/path/to/image.jpg"
                alt=""
                width="375"
                height="562"
              />
            </div>
          </a>
        </div>
        <div class="v-media-banner__content">
          <a href="#" class="v-media-banner__link">
            <div class="v-media-banner__text">
              <div class="v-media-banner__header">
                <div class="v-truncate v-media-banner__small-title v-font-bold">
                  BRAND NAME
                </div>
                <div class="v-line-clamp-2 v-media-banner__name v-font-black">
                <div class="v-line-clamp-3 v-media-banner__name v-font-black">
                <div class="v-line-clamp-3 v-media-banner__name v-font-bold">
                  THIS IS A HEADLINE
                </div>
              </div>

              <div class="v-line-clamp-2 v-media-banner__sub-name v-font-regular">
              <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
                This is the subheadline copy This is the subheadline copy This is
                the subheadline copy This is the subheadline copy This is the
                subheadline copy This is the subheadline copy
              </div>
            </div>
          </a>
          <a
            href="/path/to/link"
            class="v-button v-button--outlined v-button--full v-media-banner__button"
            ><span class="v-button__text">LEARN MORE</span></a
          >
        </div>
      </div>
    </div>
    <div class="v-banner-product__products">
      <script type="module">
        if (!window.customElements.get("swiper-container")) {
          import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
        }
      </script>

      <swiper-container
        slides-offset-before="40"
        slides-offset-after="40"
        space-between="24"
        slides-per-view="3.6"
        free-mode="true"
        sticky="true"
        class="v-carousel"
        style="--swiper-slide-size: 527.1428571428571px"
      >
        <swiper-slide>
          <div class="v-product-unit">
            <div class="v-product-unit__media-grid">
              <a href="/path/to/link" 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="/path/to/link" class="v-product-unit__link">
              <div class="v-product-unit__content">
                <div class="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">000,000</span>
                </div>
              </div>
            </a>
          </div>
        </swiper-slide>

        <!-- … -->
      </swiper-container>
    </div>
  </div>
</section>