MediaBanner

Hero Banner (324 x 404)

Brand Name StyleKorean
Renewal SALE the more free gifts you receive

<MediaBanner
  to="#"
  media={{
    src: "...",
    width: 324,
    height: 404,
  }}
  brand="Brand Name"
  style="layered"
  class="rounded-[20px]"
  contentPosition={{
    textAlign: 'center',
    justify: 'end',
  }}
>
  <Typography slot="title" size="xxl" weight="medium">
    StyleKorean <br />
    Renewal SALE
  </Typography>
  <Typography slot="description" size="sm" class="...">
    the more free gifts you receive
  </Typography>
</MediaBanner>

Full Image Banner (393 x 92)

$1 딜 전용 배너 Description Description

<MediaBanner
  to="#"
  media={{
    src: "...",
    width: 393,
    height: 92,
  }}
  contentPosition={{
    justify: 'center'
  }}
>
  <Typography slot="title" size="md" weight="bold" class="line-clamp-1">
    $1 딜 전용 배너
  </Typography>
  <Typography slot="description" size="sm" class="...">
    Description Description
  </Typography>
</MediaBanner>

Aside Layout Banner (393 x 92)

$1 딜 전용 배너 Description Description

<MediaBanner
  to="#"
  media={{
    src: "/assets/images/dummy/home/product-264x264.jpg",
    width: 393,
    height: 92,
  }}
  bgColor="#54ada0"
  contentPosition={{
    textAlign: 'left',
    justify: 'center'
  }}
>
  <Typography slot="title" size="md" weight="bold" class="text-primary-02 line-clamp-1">
    $1 딜 전용 배너
  </Typography>
  <Typography slot="description" size="sm" class="text-primary-02/80 ...">
    Description Description
  </Typography>
</MediaBanner>

Image Only Banner (393 x 92)

<MediaBanner
  to="#"
  media={{
    src: "...",
    width: 393,
    height: 92,
  }}
/>

Props & Slots