Meta on SITE

01-badge-subtitle

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

배지와 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" >}}

02-aria-tracking

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

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

03-all-meta

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

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

04-disabled-state

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

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