Img(1)+Text(밖)

샘플 페이지

Note

2025-05-07 수정

• 배너명, 배너서브명 말줄임 클래스 재정의 (shared/module/banner/#배너-말줄임 참고 부탁드립니다.)

모듈 구성

• 코너 타이틀
• 이미지/기획전/동영상

Astro

---
import Title from "@shared/ui/title/Title.astro";
import MediaBanner from "@/shared/module/media-banner/MediaBanner.astro";
import Carousel from "@shared/module/carousel/Carousel.astro";

const data = [
  /* ...*/
];
---

<section class="v-tmpl v-tmpl--img-text-1" style="margin-bottom: 48px;">
  <Title level={2}>STANDARD</Title>
  <Carousel class="v-media_aspect_default" button="white">
    {
      data.map((item) => (
        <swiper-slide>
          <MediaBanner {...item} style="stretched" />
        </swiper-slide>
      ))
    }
  </Carousel>
</section>

<section class="v-tmpl v-tmpl--img-text-1" style="margin-bottom: 48px;">
  <Title level={2}>WIDE</Title>
  <Carousel class="v-media_aspect_default" wide={true} button="white">
    {
      data.map((item) => (
        <swiper-slide>
          <MediaBanner {...item} style="wide" />
        </swiper-slide>
      ))
    }
  </Carousel>
</section>

STANDARD

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

HTML

<swiper-container
  space-between="8"
  slides-per-view="1"
  slides-per-group="1"
  navigation="true"
  pagination="true"
  class="v-carousel v-carousel_button_white v-media_aspect_default"
>
  <swiper-slide>
    <div class="v-media-banner v-media-banner--stretched">
      <div class="v-media-banner__media">
        <a href="/path/to/page">
          <div class="v-media-embed v-media-embed--dim v-media-embed--cover">
            <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-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/page"
          class="v-button v-button--outlined v-button--full v-media-banner__button"
          >LEARN MORE</a
        >
      </div>
    </div>
  </swiper-slide>
  <!-- … -->

  <div slot="container-end"></div>
</swiper-container>

WIDE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

BRAND NAME

THIS IS A HEADLINE

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

LEARN MORE

HTML

<swiper-container
  space-between="8"
  slides-per-view="1"
  slides-per-group="1"
  navigation="true"
  pagination="true"
  class="v-carousel v-carousel--wide v-carousel_button_white v-media_aspect_default"
>
  <swiper-slide>
    <div class="v-media-banner v-media-banner--wide">
      <div class="v-media-banner__media">
        <a href="/path/to/page">
          <div class="v-media-embed v-media-embed--dim v-media-embed--cover">
            <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-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/page"
          class="v-button v-button--outlined v-button--full v-media-banner__button"
          >LEARN MORE</a
        >
      </div>
    </div>
  </swiper-slide>
  <!-- … -->

  <div slot="container-end"></div>
</swiper-container>