shortcode CTA coverage index

이 페이지는 04-coverage 아래의 모든 예제를 파일 단위로 모아, 렌더링 결과와 원형 코드를 함께 보여 줍니다.

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/01-default.md

렌더링 결과

BASE기본 CTA자세히 보기

기본 동작을 확인합니다.

원형

{{< cta
  kind="default"
  label="기본 CTA"
  href="/contact/"
  ref=""
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="기본 동작을 확인합니다."
  subtitle="자세히 보기"
  aria_label=""
  badge="BASE"
  tracking_id="cta-kind-01"
  analytics_event="cta_kind_default"
  id="cta-kind-default"
  class="is-default"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/02-external.md

렌더링 결과

OFFICIAL외부 문서 열기공식 문서

새 창에서 외부 문서를 엽니다.

원형

{{< cta
  kind="external"
  label="외부 문서 열기"
  href="https://example.com/docs"
  ref="/blog/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="brand"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="새 창에서 외부 문서를 엽니다."
  subtitle="공식 문서"
  aria_label="외부 링크"
  badge="OFFICIAL"
  tracking_id="cta-kind-02"
  analytics_event="cta_kind_external"
  id="cta-kind-external"
  class="is-external"
  compact="true"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/03-related.md

렌더링 결과

RELATED관련 글 더 보기관련 읽을거리

본문과 이어서 읽기 좋습니다.

추가 설명이 필요한 경우 본문을 여기에 적습니다.

원형

{{< cta
  kind="related"
  label="관련 글 더 보기"
  href="/blog/"
  ref="/lab/hugo-content-lab/70-real-world-posts/medium-post/"
  intent="related"
  priority="tertiary"
  surface="in-content"
  size="sm"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="본문과 이어서 읽기 좋습니다."
  subtitle="관련 읽을거리"
  aria_label=""
  badge="RELATED"
  tracking_id="cta-kind-03"
  analytics_event="cta_kind_related"
  id="cta-kind-related"
  class="is-related"
  compact="false"
  disabled="false" >}}
추가 설명이 필요한 경우 본문을 여기에 적습니다.
{{< /cta >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/04-consult.md

렌더링 결과

HOT상담 신청도입 전 문의

평일 기준 1영업일 내 회신

상담 주제와 희망 일정을 함께 적어 주세요.

원형

{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref=""
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="평일 기준 1영업일 내 회신"
  subtitle="도입 전 문의"
  aria_label=""
  badge="HOT"
  tracking_id="cta-kind-04"
  analytics_event="cta_kind_consult"
  id="cta-kind-consult"
  class="is-consult"
  compact="false"
  disabled="false" >}}
상담 주제와 희망 일정을 함께 적어 주세요.
{{< /cta >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/05-download.md

렌더링 결과

PDF다운로드

파일을 바로 내려받습니다.

원형

{{< cta
  kind="download"
  label="다운로드"
  href="/files/checklist.pdf"
  ref=""
  intent="download"
  priority="utility"
  surface="inline"
  size="xs"
  tone="muted"
  align="left"
  target="_self"
  rel=""
  note="파일을 바로 내려받습니다."
  subtitle=""
  aria_label=""
  badge="PDF"
  tracking_id="cta-kind-05"
  analytics_event="cta_kind_download"
  id="cta-kind-download"
  class="u-track-cta"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/06-newsletter.md

렌더링 결과

NEW뉴스레터 구독매주 한 번

매주 핵심 업데이트를 보냅니다.

원형

{{< cta
  kind="newsletter"
  label="뉴스레터 구독"
  href="/newsletter/"
  ref=""
  intent="subscribe"
  priority="primary"
  surface="header"
  size="md"
  tone="accent"
  align="center"
  target="_self"
  rel=""
  note="매주 핵심 업데이트를 보냅니다."
  subtitle="매주 한 번"
  aria_label="뉴스레터 구독"
  badge="NEW"
  tracking_id="cta-kind-06"
  analytics_event="cta_kind_newsletter"
  id="cta-kind-newsletter"
  class="is-inline"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/07-trial.md

렌더링 결과

TRIAL무료 체험 시작14일 무료

신용카드 없이 시작할 수 있습니다.

원형

{{< cta
  kind="trial"
  label="무료 체험 시작"
  href="/signup/"
  ref=""
  intent="trial"
  priority="primary"
  surface="hero"
  size="xl"
  tone="accent"
  align="right"
  target="_self"
  rel=""
  note="신용카드 없이 시작할 수 있습니다."
  subtitle="14일 무료"
  aria_label=""
  badge="TRIAL"
  tracking_id="cta-kind-07"
  analytics_event="cta_kind_trial"
  id="cta-kind-trial"
  class="is-highlighted"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/08-price_check.md

렌더링 결과

PRICE가격 확인

요금표를 먼저 확인합니다.

원형

{{< cta
  kind="price_check"
  label="가격 확인"
  href="https://example.com/pricing"
  ref=""
  intent="pricing"
  priority="secondary"
  surface="sidebar"
  size="sm"
  tone="warning"
  align="stretch"
  target="_blank"
  rel="noopener noreferrer"
  note="요금표를 먼저 확인합니다."
  subtitle=""
  aria_label="가격 확인"
  badge="PRICE"
  tracking_id="cta-kind-08"
  analytics_event="cta_kind_price"
  id="cta-kind-price"
  class="is-price"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/09-utility.md

렌더링 결과

COPY복사

클립보드 복사를 유도합니다.

원형

{{< cta
  kind="utility"
  label="복사"
  href="/contact/"
  ref=""
  intent="copy"
  priority="utility"
  surface="inline"
  size="xs"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="클립보드 복사를 유도합니다."
  subtitle=""
  aria_label="문서 주소 복사"
  badge="COPY"
  tracking_id="cta-kind-09"
  analytics_event="cta_kind_utility"
  id="cta-kind-utility"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/10-internal.md

렌더링 결과

NEW구성 살펴보기

같은 사이트 내부 섹션으로 이동합니다.

원형

{{< cta
  kind="internal"
  label="구성 살펴보기"
  href="/lab/hugo-content-lab/30-components/"
  ref=""
  intent="internal"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="같은 사이트 내부 섹션으로 이동합니다."
  subtitle=""
  aria_label="내부 페이지로 이동"
  badge="NEW"
  tracking_id="cta-kind-10"
  analytics_event="cta_kind_internal"
  id="cta-kind-internal"
  class="is-internal"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/11-copy.md

렌더링 결과

COPY복사

문서 주소를 복사합니다.

원형

{{< cta
  kind="copy"
  label="복사"
  href="/lab/hugo-content-lab/30-components/"
  ref=""
  intent="copy"
  priority="utility"
  surface="inline"
  size="xs"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="문서 주소를 복사합니다."
  subtitle=""
  aria_label="문서 주소를 클립보드로 복사"
  badge="COPY"
  tracking_id="cta-kind-11"
  analytics_event="cta_kind_copy"
  id="cta-kind-copy"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/12-custom_offer.md

렌더링 결과

BETA맞춤 제안 보기

현재는 준비 중입니다.

맞춤 제안이 준비되면 이 자리에서 안내합니다.

원형

{{< cta
  kind="custom_offer"
  label="맞춤 제안 보기"
  href="/offers/"
  ref=""
  intent="generic"
  priority="primary"
  surface="footer"
  size="md"
  tone="danger"
  align="center"
  target="_self"
  rel=""
  note="현재는 준비 중입니다."
  subtitle=""
  aria_label=""
  badge="BETA"
  tracking_id="cta-kind-12"
  analytics_event="cta_kind_custom_offer"
  id="cta-kind-custom-offer"
  class="is-offer"
  compact="false"
  disabled="true" >}}
맞춤 제안이 준비되면 이 자리에서 안내합니다.
{{< /cta >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/13-custom.md

렌더링 결과

FALLBACK커스텀 폴백 확인

정의되지 않은 kind는 기본 preset으로 폴백합니다.

원형

{{< cta
  kind="custom"
  label="커스텀 폴백 확인"
  href="/contact/"
  ref=""
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="정의되지 않은 kind는 기본 preset으로 폴백합니다."
  subtitle=""
  aria_label=""
  badge="FALLBACK"
  tracking_id="cta-kind-13"
  analytics_event="cta_kind_custom"
  id="cta-kind-custom"
  class="is-custom"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/01-href-and-ref.md

렌더링 결과

TEST링크 우선순위 확인우선순위 테스트

href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.

원형

{{< cta
  kind="related"
  label="링크 우선순위 확인"
  href="https://example.com/docs"
  ref="/lab/hugo-content-lab/30-components/"
  intent="related"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다."
  subtitle="우선순위 테스트"
  aria_label=""
  badge="TEST"
  tracking_id="cta-routing-01"
  analytics_event="cta_route_test"
  id="cta-routing-both"
  class="is-test"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/02-external-target-blank.md

렌더링 결과

OFFICIAL새 창 안전 열기보안 속성 포함

외부 도메인은 새 창으로 엽니다.

원형

{{< cta
  kind="external"
  label="새 창 안전 열기"
  href="https://example.com/docs"
  ref="/blog/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="brand"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="외부 도메인은 새 창으로 엽니다."
  subtitle="보안 속성 포함"
  aria_label="새 창으로 외부 문서 열기"
  badge="OFFICIAL"
  tracking_id="cta-routing-02"
  analytics_event="cta_external_open"
  id="cta-routing-blank"
  class="is-external"
  compact="true"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/03-internal-ref.md

렌더링 결과

PAGE페이지 참조 이동site.GetPage 경로

ref가 실제 페이지 참조일 때의 구성을 보여줍니다.

원형

{{< cta
  kind="internal"
  label="페이지 참조 이동"
  href="/lab/hugo-content-lab/30-components/"
  ref="/lab/hugo-content-lab/70-real-world-posts/medium-post/"
  intent="internal"
  priority="secondary"
  surface="in-content"
  size="sm"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="ref가 실제 페이지 참조일 때의 구성을 보여줍니다."
  subtitle="site.GetPage 경로"
  aria_label="내부 페이지로 이동"
  badge="PAGE"
  tracking_id="cta-routing-03"
  analytics_event="cta_internal_route"
  id="cta-routing-ref"
  class="is-internal"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/04-fallback-href.md

렌더링 결과

BASE기본 이동href 중심

기본 이동 경로를 보여줍니다.

원형

{{< cta
  kind="default"
  label="기본 이동"
  href="/contact/"
  ref="/blog/"
  intent="generic"
  priority="utility"
  surface="sidebar"
  size="xs"
  tone="muted"
  align="stretch"
  target="_self"
  rel=""
  note="기본 이동 경로를 보여줍니다."
  subtitle="href 중심"
  aria_label="기본 이동"
  badge="BASE"
  tracking_id="cta-routing-04"
  analytics_event="cta_default_move"
  id="cta-routing-href"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/01-primary-hero-xl-brand-center.md

렌더링 결과

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

content/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/02-secondary-after-md-neutral-left.md

렌더링 결과

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

content/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/03-tertiary-incontent-sm-success-right.md

렌더링 결과

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

content/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/04-utility-sidebar-xs-warning-stretch.md

렌더링 결과

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

content/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/05-primary-header-lg-accent-center.md

렌더링 결과

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

렌더링 결과

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

content/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/07-utility-inline-xs-muted-left.md

렌더링 결과

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

content/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/01-badge-subtitle.md

렌더링 결과

NEW요금제 확인가장 많이 쓰는 구성

배지와 subtitle을 함께 쓰는 예시입니다.

원형

{{< cta
  kind="default"
  label="요금제 확인"
  href="/pricing/"
  ref="/blog/"
  intent="pricing"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="배지와 subtitle을 함께 쓰는 예시입니다."
  subtitle="가장 많이 쓰는 구성"
  aria_label="요금제 확인"
  badge="NEW"
  tracking_id="cta-meta-01"
  analytics_event="cta_meta_badge"
  id="cta-meta-badge"
  class="is-highlighted"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/02-aria-tracking.md

렌더링 결과

A11Y이벤트 추적접근성

접근성 라벨과 추적 ID를 함께 넣는 예시입니다.

원형

{{< cta
  kind="default"
  label="이벤트 추적"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="utility"
  surface="inline"
  size="sm"
  tone="brand"
  align="left"
  target="_self"
  rel=""
  note="접근성 라벨과 추적 ID를 함께 넣는 예시입니다."
  subtitle="접근성"
  aria_label="문서 주소를 복사"
  badge="A11Y"
  tracking_id="cta-meta-02"
  analytics_event="cta_meta_track"
  id="cta-meta-aria"
  class="u-track-cta"
  compact="true"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/03-all-meta.md

렌더링 결과

HOT전체 메타부가 제목

메타데이터를 한 번에 확인하는 예시입니다.

원형

{{< cta
  kind="external"
  label="전체 메타"
  href="https://example.com/docs"
  ref="/lab/hugo-content-lab/30-components/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="success"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="메타데이터를 한 번에 확인하는 예시입니다."
  subtitle="부가 제목"
  aria_label="전체 메타를 확인"
  badge="HOT"
  tracking_id="cta-meta-03"
  analytics_event="cta_meta_all"
  id="cta-meta-all"
  class="is-promo"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/04-disabled-state.md

렌더링 결과

OFF비활성 상태클릭 불가

disabled 상태의 메타 구성을 보여줍니다.

원형

{{< cta
  kind="default"
  label="비활성 상태"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="warning"
  align="right"
  target="_self"
  rel=""
  note="disabled 상태의 메타 구성을 보여줍니다."
  subtitle="클릭 불가"
  aria_label="비활성 상태"
  badge="OFF"
  tracking_id="cta-meta-04"
  analytics_event="cta_meta_disabled"
  id="cta-meta-disabled"
  class="is-disabled"
  compact="false"
  disabled="true" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/01-single-paragraph.md

렌더링 결과

INFO상담 신청본문 포함

단일 문단 본문 예시입니다.

평일 기준 1영업일 내에 회신드립니다.

원형

{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref="/blog/"
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="단일 문단 본문 예시입니다."
  subtitle="본문 포함"
  aria_label="상담 신청"
  badge="INFO"
  tracking_id="cta-body-01"
  analytics_event="cta_body_single"
  id="cta-body-single"
  class="is-content"
  compact="false"
  disabled="false" >}}
평일 기준 1영업일 내에 회신드립니다.
{{< /cta >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/02-multi-paragraph.md

렌더링 결과

INFO상담 신청상세 설명

여러 문단 본문 예시입니다.

첫 번째 문단입니다.

두 번째 문단입니다.

원형

{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref="/blog/"
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="여러 문단 본문 예시입니다."
  subtitle="상세 설명"
  aria_label="상담 신청"
  badge="INFO"
  tracking_id="cta-body-02"
  analytics_event="cta_body_multi"
  id="cta-body-multi"
  class="is-content"
  compact="false"
  disabled="false" >}}
첫 번째 문단입니다.

두 번째 문단입니다.
{{< /cta >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/03-heading-and-list.md

렌더링 결과

STEP상담 신청절차 안내

제목과 목록이 섞인 본문 예시입니다.

확인 순서

  1. 접수
  2. 검토
  3. 회신

원형

{{< cta
  kind="consult"
  label="상담 신청"
  href="/contact/"
  ref="/blog/"
  intent="consult"
  priority="primary"
  surface="after-content"
  size="md"
  tone="success"
  align="center"
  target="_self"
  rel=""
  note="제목과 목록이 섞인 본문 예시입니다."
  subtitle="절차 안내"
  aria_label="상담 신청"
  badge="STEP"
  tracking_id="cta-body-03"
  analytics_event="cta_body_list"
  id="cta-body-list"
  class="is-content"
  compact="false"
  disabled="false" >}}
### 확인 순서

1. 접수
2. 검토
3. 회신
{{< /cta >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/04-mixed-markdown.md

렌더링 결과

READ다음 글 보기혼합 마크다운

굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.

중요 포인트를 먼저 보고, 자세한 설명으로 넘어가세요.

원형

{{< cta
  kind="related"
  label="다음 글 보기"
  href="/lab/hugo-content-lab/70-real-world-posts/medium-post/"
  ref="/blog/"
  intent="related"
  priority="tertiary"
  surface="in-content"
  size="sm"
  tone="neutral"
  align="left"
  target="_self"
  rel=""
  note="굵게, 링크, 들여쓰기를 섞은 본문 예시입니다."
  subtitle="혼합 마크다운"
  aria_label="다음 글 보기"
  badge="READ"
  tracking_id="cta-body-04"
  analytics_event="cta_body_mixed"
  id="cta-body-mixed"
  class="is-inline-callout"
  compact="false"
  disabled="false" >}}
**중요 포인트**를 먼저 보고, [자세한 설명](/lab/hugo-content-lab/30-components/)으로 넘어가세요.
{{< /cta >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/01-unknown-kind.md

렌더링 결과

FALLBACK미지의 CTAfallback

알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.

원형

{{< cta
  kind="mystery_campaign"
  label="미지의 CTA"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="secondary"
  surface="after-content"
  size="md"
  tone="neutral"
  align="center"
  target="_self"
  rel=""
  note="알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다."
  subtitle="fallback"
  aria_label="미지의 CTA"
  badge="FALLBACK"
  tracking_id="cta-fallback-01"
  analytics_event="cta_fallback_unknown"
  id="cta-fallback-unknown"
  class="is-fallback"
  compact="false"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/02-bogus-align.md

렌더링 결과

WARN정렬 폴백정렬 검증

잘못된 align 값은 기본 정렬로 처리됩니다.

원형

{{< cta
  kind="default"
  label="정렬 폴백"
  href="/lab/hugo-content-lab/30-components/"
  ref="/blog/"
  intent="generic"
  priority="utility"
  surface="sidebar"
  size="xs"
  tone="warning"
  align="bogus"
  target="_self"
  rel=""
  note="잘못된 align 값은 기본 정렬로 처리됩니다."
  subtitle="정렬 검증"
  aria_label="정렬 폴백"
  badge="WARN"
  tracking_id="cta-fallback-02"
  analytics_event="cta_fallback_align"
  id="cta-fallback-align"
  class="is-warning"
  compact="true"
  disabled="false" >}}

content/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/03-rel-explicit.md

렌더링 결과

SAFE안전한 새 창보안 관계

rel을 명시적으로 넣는 예시입니다.

원형

{{< cta
  kind="external"
  label="안전한 새 창"
  href="https://example.com/docs"
  ref="/blog/"
  intent="external"
  priority="primary"
  surface="hero"
  size="lg"
  tone="brand"
  align="center"
  target="_blank"
  rel="noopener noreferrer"
  note="rel을 명시적으로 넣는 예시입니다."
  subtitle="보안 관계"
  aria_label="안전한 새 창 열기"
  badge="SAFE"
  tracking_id="cta-fallback-03"
  analytics_event="cta_fallback_rel"
  id="cta-fallback-rel"
  class="is-external"
  compact="false"
  disabled="false" >}}