Skip to content
SHINSEGAE V UI

Img+Story+Product

<section class="v-tmpl v-tmpl--img-1-text-in-product">
  <h2 class="v-truncate v-title">TITLE</h2>


  <swiper-container
    space-between="24"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-carousel_button_white v-media_aspect_default"
    class="v-carousel v-carousel_button_white"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- Img(1)+Text(안) -->
          <div class="v-media-banner v-media-banner--layered">
          <div class="v-media-banner v-media-banner--layered v-media-banner--hero">
            <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-4 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="/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>
          <!-- /Img(1)+Text(안) -->
        </div>
        <div class="v-banner-product__products">
          <ul role="list" class="v-item-list v-item-list_col_3">
            <li>
              <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>
            </li>
            <li>…</li>
            <li>…</li>
          </ul>
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>
<section class="v-tmpl v-tmpl--img-1-text-in-product">
  <h2 class="v-truncate v-title">TITLE</h2>


  <swiper-container
    space-between="24"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-carousel_button_white v-media_aspect_default"
    class="v-carousel v-carousel_button_white"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- Img(1)+Text(안) -->
          <div class="v-media-banner v-media-banner--layered">
          <div class="v-media-banner v-media-banner--layered v-media-banner--hero">
            <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-4 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="/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>
          <!-- /Img(1)+Text(안) -->
        </div>
        <div class="v-banner-product__products">
          <ul role="list" class="v-item-list v-item-list_col_4">
            <li>
              <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>
            </li>
            <li>…</li>
            <li>…</li>
            <li>…</li>
          </ul>
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>