Skip to Content
ComponentsFoundationTypography

Typography

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

개요

Typography는 일관된 텍스트 스타일링을 위한 컴포넌트 모음입니다. H1~H4 제목, 본문, 인용문, 리스트, 코드 등 다양한 텍스트 스타일을 제공합니다. children으로 텍스트를 전달하고, className으로 기본 스타일을 오버라이드할 수 있습니다.

주요 특징

  • ✅ Heading 스타일: H1~H4 레벨별 제목 스타일
  • ✅ 본문 스타일: P, Lead, Large, Small, Muted
  • ✅ 기타 스타일: Blockquote, List, InlineCode
  • ✅ className 오버라이드: 기본 스타일 위에 커스텀 클래스 적용 가능
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

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

className 오버라이드

커스텀 스타일 제목

강조된 본문 텍스트

API Reference

공통 Props

모든 Typography 컴포넌트는 다음 props를 지원합니다.

PropTypeDefaultDescription
childrenReact.ReactNode-표시할 텍스트 또는 요소
classNamestring-기본 스타일 위에 추가/오버라이드
...propsHTMLAttributes-해당 HTML 요소의 네이티브 속성들

컴포넌트 목록

컴포넌트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>페이지 제목</TypographyH1>
<TypographyH2>섹션 제목</TypographyH2>
<TypographyP>본문 텍스트</TypographyP>
<TypographyP className="text-primary">커스텀 스타일 적용</TypographyP>

접근성

권장 사항

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

관련 컴포넌트

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