항목

Meta

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

04-disabled-state

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

1분 읽기

03-all-meta

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

1분 읽기

02-aria-tracking

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

1분 읽기

01-badge-subtitle

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

1분 읽기