Skip to content
SHINSEGAE V UI

배너, 퀵 링크, HTML 모듈

텍스트 라인 배너

Astro
<LineBanner to="https://shinsegaev.com">배너 텍스트</LineBanner>
<LineBanner to="https://shinsegaev.com" wide={true}>배너 텍스트</LineBanner>

Props:

  • to:string: 링크 URL
  • wide?:boolean: 와이드형

Code

<a class="v-line-banner" href="https://shinsegaev.com">
  <div class="v-line-banner__content">배너 텍스트</div>
  <svg viewBox="0 0 7 12" class="v-line-banner__icon">
    <path d="M1 1L6 6L1 11"></path>
  </svg>
</a>
<a class="v-line-banner v-line-banner--wide" href="https://shinsegaev.com">
  <div class="v-line-banner__content">배너 텍스트 (와이드)</div>
  <svg viewBox="0 0 7 12" class="v-line-banner__icon">
    <path d="M1 1L6 6L1 11"></path>
  </svg>
</a>

Preview

배너 텍스트
배너 텍스트 (와이드)

이미지/동영상 배너

Astro
<MediaBanner
  to="#"
  media={{
    src: `/dummy/images/s3/goods/org/764/250218059189764.jpg?RS=350&SP=1`,
  }}
  linkText={true}
  smallTitle="BRAND NAME"
  name="HEADLINE"
  subName="SUBLINE"
  button="BUTTON TEXT"
  style="flow wide"
/>


<MediaBanner
  to="#"
  media={{
    src: `/dummy/images/s3/goods/org/764/250218059189764.jpg?RS=350&SP=1`,
  }}
  linkText={true}
  smallTitle="BRAND NAME"
  name={{
    text: "HEADLINE",
    underline: true
  }}
  subName="SUBLINE"
  button="BUTTON TEXT"
  style="flow wide"
/>


<MediaBanner
  to="#"
  media={{
    src: `/dummy/images/s3/goods/org/764/250218059189764.jpg?RS=350&SP=1`,
  }}
  linkText={true}
  smallTitle="BRAND NAME"
  name={{text: "HEADLINE", lines: 3}}
  subName={{text: "SUBLINE", lines: 3}}
  button="BUTTON TEXT"
  style="layered"
/>

배너 말줄임

배너 모듈전시 속성클래스명
Img+Text배너명v-line-clamp-3
배너서브명v-line-clamp-3
Img+Story배너명v-line-clamp-4
배너서브명v-line-clamp-10
Img+Story+Product배너명v-line-clamp-4
배너서브명v-line-clamp-3

이미지 + 텍스트

<div class="v-media-banner v-media-banner--flow"><!-- 와이드형 v-media-banner--wide 클래스 추가 -->
  <div class="v-media-banner__media">
    <a href="#">
      <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"
          alt=""
        />
      </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-media-banner__small-title v-truncate v-font-bold">BRAND NAME</div>
          <div class="v-media-banner__name v-line-clamp-3 v-font-bold">HEADLINE</div>
        </div>
        <div class="v-media-banner__sub-name v-line-clamp-3 v-font-regular">SUBLINE</div>
      </div>
    </a>
    <a
      href="#"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>
BRAND NAME
HEADLINE
SUBLINE
 BUTTON TEXT
BRAND NAME
HEADLINE
SUBLINE
 BUTTON TEXT
BRAND NAME
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!
 BUTTON TEXT

이미지 + 텍스트(내부)

<div class="v-media-banner v-media-banner--layered">
  <div class="v-media-banner__media">
    <div class="v-media-embed v-media-embed--dim">
      <img
        class="v-media-embed__element v-media-embed__image"
        src="/dummy/images/s3/goods/org/764/250218059189764.jpg?RS=350&amp;SP=1"
        alt=""
      />
    </div>
  </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-media-banner__small-title v-truncate v-font-bold">BRAND NAME</div>
          <div class="v-media-banner__name v-line-clamp-3 v-font-bold">HEADLINE</div>
        </div>
        <div class="v-media-banner__sub-name v-line-clamp-3 v-font-regular">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora,
          labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est
          sequi provident aliquam in at veniam ab asperiores, iusto, nihil
          reiciendis eligendi!
        </div>
      </div>
    </a>
    <a
      href="#"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>
BRAND NAME
HEADLINE
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!
 BUTTON TEXT

퀵 링크

Astro
---
import QuickLink from "@shared/module/quick-link/QuickLink.astro";
import Carousel from "@shared/module/carousel/Carousel.astro";


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


<Carousel slidesPerView={2.7551}>
  {
    data.map((item) => (
      <swiper-slide>
        <QuickLink to={item.to} media={item.media} text={item.text} />
      </swiper-slide>
    ))
  }
</Carousel>

Props:

  • to:string: 링크 URL
  • media:ComponentProps<typeof MediaEmbed>: 이미지/동영상. MediaEmbed 참조
  • text?:string: 텍스트

Code

<swiper-container
  slides-offset-before="24"
  slides-offset-after="24"
  space-between="8"
  slides-per-view="2.7551"
  free-mode="true"
  sticky="true"
  class="v-carousel"
>
  <swiper-slide>
    <a class="v-quick-link">
      <div class="v-media-embed">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
        />
      </div>
      <span class="v-quick-link__text v-font-bold">BRAND NAME</span>
    </a>
  </swiper-slide>
  …
</swiper-container>

Preview

HTML 모듈

Astro
---
import HtmlEmbed from "@shared/module/html-embed/HtmlEmbed.astro";
---


<HtmlEmbed wide={true}>
  <!-- HTML 코드 -->
</HtmlEmbed>

Props:

  • wide?:boolean: 와이드형

Code

<div class="v-html-embed v-html-embed--wide">
  <!-- HTML 등록 코드 -->
  <p>
    There are over a hundred HTML elements. This page uses all of them. You’re
    looking at &lt;p&gt;&lt;/p&gt; right now.
  </p>
  <hgroup>
    <h1>
      <p>
        HTML loves text. We can get some huge text with &lt;h1&gt;&lt;/h1&gt;.
      </p>
    </h1>
    <h2>Or smaller with &lt;h2&gt;&lt;/h2&gt;</h2>
    <h3>And so on…</h3>
    <h4>And so on…</h4>
    <h5>And so on…</h5>
    <h6>
      <p>
        And… nope that’s it for headings. These are all in an
        &lt;hgroup&gt;&lt;/hgroup&gt; by the way.
      </p>
    </h6>
  </hgroup>
  <!-- /HTML 등록 코드 -->
</div>

Preview

There are over a hundred HTML elements. This page uses all of them. You’re looking at <p></p> right now.

HTML loves text. We can get some huge text with <h1></h1>.

Or smaller with <h2></h2>

And so on…

And so on…

And so on…

And… nope that’s it for headings. These are all in an <hgroup></hgroup> by the way.