CTA 카드

글이나 화면을 끝까지 본 사람에게 다음 행동 하나를 제안한다. 제목, 설명, 단추 한 개로 끝나고 단추가 둘 이상이 되지 않는다. 본문 끝에는 stack, 목록 끝이나 글 중간의 가로 띠에는 band 를 쓴다. 긴 설명은 좁은 화면에서 shortDescription 한 문장으로 줄어든다.

활용 방법

본문 끝 (stack)

최대 폭 768px. 설명은 문장 하나로 주거나 문단 배열로 준다.

Preview

tsx

<CtaCard
  href={consultUrl}
  title="우리 팀에 맞춘 도구가 필요하다면"
  description="모바일 앱, 데스크톱 프로그램, 업무 시스템을 필요한 기능만 골라 맞춤으로 만듭니다."
  shortDescription="필요한 기능만 골라 맞춤으로 만듭니다."
  actionLabel="무료로 상담받기"
/>

가로 띠 (band)

최대 폭 960px. 글 왼쪽, 단추 오른쪽이고 sm 미만에서는 세로로 쌓인다. 목록 끝이나 긴 글 중간에 둔다.

Preview

tsx

<CtaCard
  href={contactUrl}
  layout="band"
  title="원하는 답을 찾지 못했다면"
  description="상황을 알려 주면 필요한 내용을 함께 정리합니다."
  actionLabel="문의하기"
/>

속성

이름	타입	기본값	설명
title	ReactNode	-	카드 제목
description	ReactNode \| ReactNode[]	-	설명. 배열이면 문단 여러 개
shortDescription	ReactNode	-	sm 미만에서 설명 대신 보이는 한 문장
actionLabel	ReactNode	-	단추 문구
layout	"stack" \| "band"	"stack"	끝 카드 · 가로 띠
className	string	-	카드(root)에 붙는다
...a	AnchorHTMLAttributes	-	href 등은 단추 <a> 에 붙는다. ref 도 단추