Img(3)+Text(안,밖)

샘플 페이지

Text(안)

모바일과 동일합니다.

<div class="v-media-banner">
  <div class="v-media-banner__media">
    <a href="/path/to/link">
      <div class="v-media-embed">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
          width="597"
          height="896"
        />
      </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-2 v-media-banner__sub-name v-font-regular">
        <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>

Text(밖)

모바일과 동일합니다. v-media-banner--stretched 클래스를 사용합니다.

<div class="v-media-banner v-media-banner--stretched">
  <div class="v-media-banner__media">
    <a href="/path/to/link">
      <div class="v-media-embed">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
          width="597"
          height="896"
        />
      </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-2 v-media-banner__sub-name v-font-regular">
        <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>