MediaBanner

Demo - 이미지 / 영상
참고 링크

video-player

Astro

이미지 / 텍스트 out

<MediaBanner
  to="#"
  media={{src: `/dummy/images/s3/goods/org/764/250218059189764.jpg?RS=350&SP=1`}}
  linkText={true}
  smallTitle={{
    text: "SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE",
    weight: "bold",
    lines: 2,
  }}
  name={{ text: "HEADLINE", weight: "bold" }}
  separator
  subName={{ text: "SUBNAME" }}
  button="BUTTON TEXT"
  devAttrs={{ "data-gtm-label": "media-banner" }}
>
  <Fragment slot="products">
    <div>상품 카드/리스트 슬롯</div>
  </Fragment>
</MediaBanner>

영상 / 텍스트 in

<!--
video.autoplay
- true: 비디오 영역 링크 적용
- false: 비디오 영역 링크 미적용 (컨트롤러 조작이 필요하므로)
 -->
<MediaBanner
  media={{
    src: "/dummy/videos/cat.mp4",
    width: 375,
    height: 562,
    video: {
      poster: "/dummy/videos/cat.jpg",
      autoplay: true,
      loop: true,
    },
  }}
  name="HEADLINE"
  button="BUTTON TEXT"
  style="layered"
/>

Props:

to: string: 링크 URL
media: object: MediaEmbed에 넘길 값들
wide?: boolean: 와이드형
linkMedia: boolean: 링크 적용
style?: string: layered 사용시, 텍스트 in

HTML

이미지 / 텍스트 out

<div class="v-media-banner">
  <div class="v-media-banner__media">
    <a href="#" data-gtm-label="media-banner">
      <div class="v-media-embed">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/dummy/images/s3/goods/org/764/250218059189764.jpg?RS=350&amp;SP=1"
        >
      </div>
    </a>
  </div>
  <div class="v-media-banner__content">
    <a
      href="#"
      class="v-media-banner__link"
      data-gtm-label="media-banner"
    >
      <div class="v-media-banner__text">
        <div class="v-media-banner__header">
          <div class="v-font-bold v-line-clamp-2 v-media-banner__small-title">SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE</div>
          <div class="v-font-bold v-media-banner__name">HEADLINE</div>
        </div>
        <div class="v-media-banner__separator"></div>
        <div class="v-media-banner__sub-name">SUBNAME</div>
      </div>
    </a>
    <a
      href="#"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      data-gtm-label="media-banner"
    >
      <span class="v-button__text">BUTTON TEXT</span>
    </a>
    <div class="v-media-banner__products">
      <div>상품 카드/리스트 슬롯</div>
    </div>
  </div>
</div>

영상 / 텍스트 in

<div class="v-media-banner v-media-banner--layered">
  <div class="v-media-banner__media">
    <a>
      <div class="v-media-embed v-media-embed--dim">
        <video-player autoplay class="v-video-player v-media-embed__element v-media-embed__video">
          <video poster="/dummy/videos/cat.jpg" width="375" height="562" playsinline>
            <source src="/dummy/videos/cat.mp4" type="video/mp4">
          </video>
        </video-player>
      </div>
    </a>
  </div>
  <div class="v-media-banner__content">
    <div class="v-media-banner__text">
      <div class="v-media-banner__header">
        <div class="v-media-banner__name">HEADLINE</div>
      </div>
    </div>
    <button type="button" class="v-button v-button--outlined v-button--full v-media-banner__button">
      <span class="v-button__text">BUTTON TEXT</span>
    </button>
  </div>
</div>

Preview

*텍스트 in : 스탠다드/와이드 선택 없음. 기본 와이드 너비