Skip to Content
ComponentsIcignalTypography (Title / SubTitle)

Typography (Title / SubTitle)

페이지 제목과 섹션 제목을 위한 Typography 컴포넌트

개요

iCignal Typography는 Foundation Typography 스타일을 기반으로, props로 제어 가능한 Title과 SubTitle 컴포넌트를 제공합니다. 지정된 Typography 레벨만 사용하도록 제한하여 디자인 일관성을 보장합니다.

주요 특징

  • ✅ Typography 레벨 제한: Title은 H2H3, SubTitle은 H4H5만 허용
  • ✅ 기본 스타일: 폰트 크기/두께/행간/색상은 Typography 토큰 기반
  • ✅ 정렬: left, center, right 정렬 지원
  • ✅ 길이 처리: SubTitle에서 truncate로 말줄임 처리 지원
  • ✅ 구역 간 간격: className으로 spacing 토큰 적용 가능
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

Title - Typography 레벨

H2~H3 등 지정된 Typography 레벨로만 표현합니다.

페이지 제목 (H2)

섹션 제목 (H3)

Title - 정렬

기본 정렬은 좌측이며, center/right 정렬도 지원합니다.

좌측 정렬 (기본)

중앙 정렬

우측 정렬

Sub Title - Typography 레벨

H4~H5 등 지정된 Typography 레벨로만 표현합니다.

서브 타이틀 (H4)

서브 타이틀 (H5)

Sub Title - 길이 처리

truncate prop으로 말줄임(ellipsis) 처리를 적용할 수 있습니다.

줄바꿈되는 긴 서브 타이틀 텍스트가 컨테이너를 초과합니다

말줄임 처리되는 긴 서브 타이틀 텍스트가 컨테이너를 초과합니다

Sub Title - 정렬

좌측 정렬 (기본)

중앙 정렬

우측 정렬

API Reference

Title Props

PropTypeDefaultDescription
level"h2" | "h3""h2"HTML heading 레벨
align"left" | "center" | "right""left"텍스트 정렬
classNamestring-추가 CSS 클래스
childrenReactNode-제목 내용

SubTitle Props

PropTypeDefaultDescription
level"h4" | "h5""h4"HTML heading 레벨
align"left" | "center" | "right""left"텍스트 정렬
truncatebooleanfalse말줄임(ellipsis) 처리 여부
classNamestring-추가 CSS 클래스 (spacing 등)
childrenReactNode-제목 내용

기본 사용법

import { Title, SubTitle } from "@vortex/ui-icignal"
 
<Title level="h2">페이지 제목</Title>
<Title level="h3" align="center">섹션 제목</Title>
<SubTitle level="h4">서브 타이틀</SubTitle>
<SubTitle level="h5" truncate>긴 서브 타이틀 텍스트</SubTitle>

접근성

권장 사항

  • ✅ Title은 페이지/영역의 주 제목으로 사용 (H2~H3)
  • ✅ SubTitle은 구역/섹션 제목으로 사용 (H4~H5)
  • ✅ 제목 레벨을 논리적 순서로 사용 (H2 → H3 → H4 → H5)
  • ❌ 시각적 크기를 위해 잘못된 레벨 사용 금지

관련 컴포넌트

  • Typography: Foundation Typography 스타일 레퍼런스
Last updated on
Tree