@jdesignlab/typography

Text

Text 컴포넌트를 사용한다면, 목적에 맞는 컨텐츠를 표현하기 위해 간편하게 타이포그라피를 적용하실 수 있습니다.

Usage

Storybook

  <Text variant="heading" size="2xl">
    2XL Heading
  </Text>
  <Text variant="heading" size="xl">
    XL Heading
  </Text>
  <Text variant="heading" size="lg">
    Large Heading
  </Text>
  <Text variant="heading" size="md">
    Medium Heading
  </Text>
  <Text variant="heading" size="sm">
    Small Heading
  </Text>
  <hr />
  <Text variant="label" size="2xl">
    2XL Label
  </Text>
  <Text variant="label" size="xl">
    XL Label
  </Text>
  <Text variant="label" size="lg">
    Large Label
  </Text>
  <Text variant="label" size="md">
    Medium Label
  </Text>
  <Text variant="label" size="sm">
    Small Label
  </Text>
  <hr />
  <Text size="2xl">2XL Paragraph</Text>
  <Text size="xl">XL Paragraph</Text>
  <Text size="lg">Large Paragraph</Text>
  <Text size="md">Medium Paragraph</Text>
  <Text size="sm">Small Paragraph</Text>

Props

Text

Property	Allow Types	Description	Default
size	sm md lg xl 2xl	Text의 크기를 지정합니다.	md
variant	paragraph label heading	Text의 스타일을 지정합니다.	paragraph
bold	light medium semi extra number	Text의 굵기를 지정합니다. 정의된 타입을 사용하거나 크기를 직접 정하실 수 있습니다.
decoration	none underline line-through overline	Text의 decoration 스타일을 지정합니다.	none
transform	none capitalize uppercase lowercase	Text의 transform 스타일을 지정합니다.	none
align	start end center justify	Text의 align 스타일을 지정합니다.	start
fontstyle	italic oblique normal	Text의 fontStyle 스타일을 지정합니다.	normal
as	React.ElementType	Element Type	p
color	ColorToken	폰트의 Color 색상을 지정합니다.	font