Skip to Content
ComponentsFoundationTypography

Typography

텍스트 스타일링을 위한 Typography 컴포넌트 모음

개요

Typography는 일관된 텍스트 스타일링을 위한 레퍼런스 컴포넌트 모음입니다. H1~H4 제목, 본문, 인용문, 리스트, 코드 등 다양한 텍스트 스타일을 제공합니다.

주요 특징

  • ✅ Heading 스타일: H1~H4 레벨별 제목 스타일
  • ✅ 본문 스타일: P, Lead, Large, Small, Muted
  • ✅ 기타 스타일: Blockquote, List, InlineCode
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

Heading 스타일

Taxing Laughter: The Joke Tax Chronicles

The People of the Kingdom

The Joke Tax

People stopped telling jokes

본문 스타일

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

A modal dialog that interrupts the user with important content and expects a response.

Are you absolutely sure?
Email address

Enter your email address.

기타 스타일

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
@radix-ui/react-alert-dialog

API Reference

컴포넌트 목록

Foundation Typography는 스타일 레퍼런스용 컴포넌트로, props를 받지 않는 데모 컴포넌트입니다.

컴포넌트HTML 요소Description
TypographyH1<h1>최상위 제목
TypographyH2<h2>섹션 제목
TypographyH3<h3>하위 섹션 제목
TypographyH4<h4>소제목
TypographyP<p>본문 텍스트
TypographyLead<p>리드 텍스트
TypographyLarge<div>큰 텍스트
TypographySmall<small>작은 텍스트
TypographyMuted<p>뮤트 텍스트
TypographyBlockquote<blockquote>인용문
TypographyList<ul>리스트
TypographyInlineCode<code>인라인 코드

기본 사용법

import {
  TypographyH1,
  TypographyH2,
  TypographyH3,
  TypographyH4,
  TypographyP,
} from "@vortex/ui-foundation"
 
<TypographyH1 />
<TypographyH2 />
<TypographyP />

접근성

권장 사항

  • ✅ 제목 레벨(H1~H4)을 논리적 순서로 사용
  • ✅ H1은 페이지당 하나만 사용
  • ❌ 시각적 크기를 위해 제목 레벨을 건너뛰지 않도록 주의

관련 컴포넌트

  • Title: iCignal에서 제공하는 props 기반 Title/SubTitle 컴포넌트
Last updated on
TreeiCignal Components