Img(1)+Text(안)

• 샘플 페이지
• 참고: Carousel

Note

2025-04-16 수정

• 전시템플릿 섹션 마크업 추가(샘플 페이지의 템플릿 클래스명 수정): v-tmpl--img-text-1 → v-tmpl--img-1-text-in
• 잘못된 이미지 비율 클래스 삭제: v-media_aspect_default
• 배너 이미지 비율 클래스 추가: v-media-banner--hero

---

2025-05-07 수정

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

Astro

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

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

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

<section class="v-tmpl v-tmpl--img-1-text-in" style="margin-bottom: 48px;">
  <Title level={2}>WIDE</Title>
  <Carousel wide={true} button="white">
    {
      banners.map((item) => (
        <swiper-slide>
          <MediaBanner {...item} style="layered hero" />
        </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

<section class="v-tmpl v-tmpl--img-1-text-in">
  <h2 class="v-title v-truncate">STANDARD</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-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/page">
            <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-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>
</section>

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

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

  <swiper-container
    space-between="24"
    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"
    class="v-carousel v-carousel--wide v-carousel_button_white"
  >
    <swiper-slide>
      <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/page">
            <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-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>
</section>