ImageBanner

프로모·이벤트 히어로 배너예요. 이미지 위에 제목·CTA를 겹쳐 보여줘요.

사용법

ImageBanner는 프로모·이벤트 히어로 배너예요. 이미지 위에 제목·CTA를 겹쳐 보여줘요.

스타일 커스터마이징

ImageBanner 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<ImageBanner
  className="shadow-md"
  style={{
    --gtd-component-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<ImageBanner
  classNames={{
    media: "my-image-banner-media",
    img: "my-image-banner-img",
    scrim: "my-image-banner-scrim",
    copy: "my-image-banner-copy",
    title: "my-image-banner-title",
    subtitle: "my-image-banner-subtitle",
    action: "my-image-banner-action"
  }}
/>

CSS 변수

변수	설명

인터페이스

ImageBannerProps

속성	타입	기본값	설명
imageUrl	string	—	배경 이미지 URL
image	ReactNode	—	커스텀 미디어 슬롯
title	string	—	제목
subtitle	string	—	부제
action	ReactNode	—	CTA 슬롯
aspect	"16/9" \| "21/9" \| "4/3" \| "1/1"	21/9	비율
overlay	"bottom" \| "center" \| "none"	bottom	텍스트 위치
dimmed	boolean	true	하단 그라데이션 딤
onClick	() => void	—	클릭 시 버튼으로 렌더
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { ImageBanner } from "@/components/ui/ImageBanner";