Visual on SITE

01-primary-hero-xl-brand-center

Mon, 01 Jan 0001 00:00:00 +0000

가장 눈에 띄는 핵심 CTA입니다.


{{< cta
  kind="default"
  label="핵심 CTA"
  href="/contact/"
  ref="/blog/"
  intent="generic"
  priority="primary"
  surface="hero"
  size="xl"
  tone="brand"
  align="center"
  target="_self"
  rel=""
  note="가장 눈에 띄는 핵심 CTA입니다."
  subtitle="영웅 영역"
  aria_label="핵심 CTA"
  badge="TOP"
  tracking_id="cta-visual-01"
  analytics_event="cta_visual_top"
  id="cta-visual-hero"
  class="is-hero"
  compact="false"
  disabled="false" >}}

02-secondary-after-md-neutral-left

Mon, 01 Jan 0001 00:00:00 +0000

MORE보조 CTA보조 동작

본문 뒤에서 자연스럽게 이어지는 구성입니다.


{{< cta
  kind="default"
  label="보조 CTA"
  href="/blog/"
  ref="/lab/hugo-content-lab/30-components/"
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="본문 뒤에서 자연스럽게 이어지는 구성입니다."
  subtitle="보조 동작"
  aria_label="보조 CTA"
  badge="MORE"
  tracking_id="cta-visual-02"
  analytics_event="cta_visual_more"
  id="cta-visual-after"
  class="is-secondary"
  compact="false"
  disabled="false" >}}

03-tertiary-incontent-sm-success-right

Mon, 01 Jan 0001 00:00:00 +0000

MID본문 CTA문단 사이

본문 중간에 배치하는 예시입니다.


{{< cta
  kind="default"
  label="본문 CTA"
  href="/signup/"
  ref="/contact/"
  intent="generic"
  priority="tertiary"
  surface="in-content"
  size="sm"
  tone="success"
  align="right"
  target="_self"
  rel=""
  note="본문 중간에 배치하는 예시입니다."
  subtitle="문단 사이"
  aria_label="본문 CTA"
  badge="MID"
  tracking_id="cta-visual-03"
  analytics_event="cta_visual_mid"
  id="cta-visual-inline"
  class="is-inline-callout"
  compact="true"
  disabled="false" >}}

04-utility-sidebar-xs-warning-stretch

Mon, 01 Jan 0001 00:00:00 +0000

UTIL유틸 CTA유틸리티

사이드바용 경량 CTA입니다.


{{< cta
  kind="utility"
  label="유틸 CTA"
  href="/contact/"
  ref="/blog/"
  intent="copy"
  priority="utility"
  surface="sidebar"
  size="xs"
  tone="warning"
  align="stretch"
  target="_self"
  rel=""
  note="사이드바용 경량 CTA입니다."
  subtitle="유틸리티"
  aria_label="유틸 CTA"
  badge="UTIL"
  tracking_id="cta-visual-04"
  analytics_event="cta_visual_utility"
  id="cta-visual-utility"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

05-primary-header-lg-accent-center

Mon, 01 Jan 0001 00:00:00 +0000

WEEKLY뉴스레터주 1회 발송

헤더에서 반복적으로 안내하는 CTA입니다.


{{< cta
  kind="newsletter"
  label="뉴스레터"
  href="/newsletter/"
  ref="/blog/"
  intent="subscribe"
  priority="primary"
  surface="header"
  size="lg"
  tone="accent"
  align="center"
  target="_self"
  rel=""
  note="헤더에서 반복적으로 안내하는 CTA입니다."
  subtitle="주 1회 발송"
  aria_label="뉴스레터 구독"
  badge="WEEKLY"
  tracking_id="cta-visual-05"
  analytics_event="cta_visual_header"
  id="cta-visual-header"
  class="is-header-cta"
  compact="false"
  disabled="false" >}}

06-secondary-footer-md-danger-right

Mon, 01 Jan 0001 00:00:00 +0000


{{< cta
  kind="custom_offer"
  label="맞춤 제안"
  href="/offers/"
  ref="/pricing/"
  intent="generic"
  priority="secondary"
  surface="footer"
  size="md"
  tone="danger"
  align="right"
  target="_self"
  rel=""
  note="푸터에서 마무리 제안으로 쓰는 예시입니다."
  subtitle="마지막 유도"
  aria_label="맞춤 제안 보기"
  badge="BETA"
  tracking_id="cta-visual-06"
  analytics_event="cta_visual_footer"
  id="cta-visual-footer"
  class="is-footer-cta"
  compact="false"
  disabled="false" >}}

07-utility-inline-xs-muted-left

Mon, 01 Jan 0001 00:00:00 +0000

COPY복사클립보드

인라인에서 최소 면적으로 동작합니다.


{{< cta
  kind="copy"
  label="복사"
  href="/contact/"
  ref="/lab/hugo-content-lab/30-components/"
  intent="copy"
  priority="utility"
  surface="inline"
  size="xs"
  tone="muted"
  align="left"
  target="_self"
  rel=""
  note="인라인에서 최소 면적으로 동작합니다."
  subtitle="클립보드"
  aria_label="문서 주소 복사"
  badge="COPY"
  tracking_id="cta-visual-07"
  analytics_event="cta_visual_copy"
  id="cta-visual-copy"
  class="is-copy"
  compact="true"
  disabled="false" >}}