Text

Text 컴포넌트는 디자인 시스템 내에 적용된 폰트 설정들을 손쉽게 적용하여 내용을 작성할 수 있게끔 도와주는 컴포넌트입니다.
부모 노드에 시맨틱 태그를 사용하여 시맨틱 마크업을 할 수 있도록 Text 컴포넌트 내부는 span 태그로 구성하였습니다.
시맨틱 태그 안에 Text 컴포넌트를 위치시켜 웹 접근성을 준수한 마크업이 가능합니다.

Default

 
  <Text>텍스트</Text>

Using example

size와 weight 값을 통해 5종류의 크기와 3종류의 굵기 정도를 조절할 수 있습니다.
그 외 스타일링이 필요한 부분은 tailwind css 문법에 맞게 className의 속성 값으로 적용하면 됩니다.

 
  <Text size="base" weight="medium" className="text-color-Grayscale-100" >
    content
  </Text>

Size	weight (R,M,B)	Description
base	`medium`, `semibold`, `bold`	`Body3_16` 을 나타냅니다.
xs		`Body5_12` 을 나타냅니다.
sm		`Body4_14` 을 나타냅니다.
lg		`Body2_18` 을 나타냅니다.
xl		`Body1_20` 을 나타냅니다.

Logo Title