항목

Visual

연결된 항목을 한눈에 살펴보세요.

07-utility-inline-xs-muted-left

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" >}}

1분 읽기

06-secondary-footer-md-danger-right

BETA맞춤 제안마지막 유도 푸터에서 마무리 제안으로 쓰는 예시입니다. {{< 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" >}}

1분 읽기

05-primary-header-lg-accent-center

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" >}}

1분 읽기

04-utility-sidebar-xs-warning-stretch

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" >}}

1분 읽기

03-tertiary-incontent-sm-success-right

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" >}}

1분 읽기

02-secondary-after-md-neutral-left

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" >}}

1분 읽기

01-primary-hero-xl-brand-center

TOP핵심 CTA영웅 영역 가장 눈에 띄는 핵심 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" >}}

1분 읽기