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

1 + 1.5 STANDARD

1+1.5 STANDARD

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-product"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">1+1.5 STANDARD</h2>
  <div class="v-banner-product">
    <div class="v-banner-product__banner">
      <div class="v-media-banner">
        <div class="v-media-banner__media">
          <a href="/link/to/page">
            <div class="v-media-embed">
              <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-3 v-media-banner__name v-font-bold">
                  THIS IS A HEADLINE
                </div>
              </div>

              <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="/link/to/page"
            class="v-button v-button--outlined v-button--full v-media-banner__button"
            >LEARN MORE</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="24"
        slides-offset-after="24"
        space-between="8"
        slides-per-view="1.3725"
        free-mode="true"
        sticky="true"
        class="v-carousel v-media_aspect_default"
      >
        <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>

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

1 + 1.5 WIDE

1+1.5 WIDE

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-product"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">1+1.5 WIDE</h2>
  <div class="v-banner-product">
    <div class="v-banner-product__banner">
      <div class="v-media-banner v-media-banner--wide">
        <div class="v-media-banner__media">
          <a href="/link/to/page">
            <div class="v-media-embed">
              <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-3 v-media-banner__name v-font-bold">
                  THIS IS A HEADLINE
                </div>
              </div>

              <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="/link/to/page"
            class="v-button v-button--outlined v-button--full v-media-banner__button"
            >LEARN MORE</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="24"
        slides-offset-after="24"
        space-between="8"
        slides-per-view="1.3725"
        free-mode="true"
        sticky="true"
        class="v-carousel v-media_aspect_default"
      >
        <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>

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

1 + 2.5 STANDARD

1+2.5 STANDARD

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-product"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">1+2.5 STANDARD</h2>
  <div class="v-banner-product">
    <div class="v-banner-product__banner">
      <div class="v-media-banner">
        <div class="v-media-banner__media">
          <a href="/link/to/page">
            <div class="v-media-embed">
              <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-3 v-media-banner__name v-font-bold">
                  THIS IS A HEADLINE
                </div>
              </div>

              <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="/link/to/page"
            class="v-button v-button--outlined v-button--full v-media-banner__button"
            >LEARN MORE</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="24"
        slides-offset-after="24"
        space-between="8"
        slides-per-view="2.7551"
        free-mode="true"
        sticky="true"
        class="v-carousel v-media_aspect_default"
      >
        <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>

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

1 + 2.5 WIDE

1+2.5 WIDE

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-product"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">1+2.5 WIDE</h2>
  <div class="v-banner-product">
    <div class="v-banner-product__banner">
      <div class="v-media-banner v-media-banner--wide">
        <div class="v-media-banner__media">
          <a href="/link/to/page">
            <div class="v-media-embed">
              <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-3 v-media-banner__name v-font-bold">
                  THIS IS A HEADLINE
                </div>
              </div>

              <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="/link/to/page"
            class="v-button v-button--outlined v-button--full v-media-banner__button"
            >LEARN MORE</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="24"
        slides-offset-after="24"
        space-between="8"
        slides-per-view="2.7551"
        free-mode="true"
        sticky="true"
        class="v-carousel v-media_aspect_default"
      >
        <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>

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