Typography - Kitchen Sink

컬러 토큰

Text / Primary / Default

Text / Primary / Foreground

Accent / Strong

Accent / Default

Text / Secondary / Disabled_1

Text / Secondary / Disabled_2

          <Typography class="text-body-14-regular
          text-sk-primary-default">텍스트</Typography> <Typography
          class="text-body-14-regular text-sk-primary-foreground">텍스트</Typography>
          <Typography class="text-body-14-regular
          text-sk-accent-strong">텍스트</Typography> <Typography
          class="text-body-14-regular text-sk-accent">텍스트</Typography> <Typography
          class="text-body-14-regular text-sk-secondary-disabled-1">텍스트</Typography>
          <Typography class="text-body-14-regular
          text-sk-secondary-disabled-2">텍스트</Typography>
        

타이포그래피 토큰

Heading 38px Bold

제목 38px Bold

          <Typography class="text-heading-38-bold text-sk-primary-default">제목 38px
          Bold</Typography>
        

Heading 30px Medium

제목 30px Medium

          <Typography class="text-heading-30-medium text-sk-primary-default">제목 30px
          Medium</Typography>
        

Heading 16px Regular

제목 16px Regular

          <Typography class="text-heading-16-regular text-sk-primary-default">제목 16px
          Regular</Typography>
        

Body 14px Regular

          <Typography class="text-body-14-regular text-sk-primary-default">Body 14px
          Regular</Typography>
        

Body 12px Regular

          <Typography class="text-body-12-regular text-sk-primary-default">Body 12px
          Regular</Typography>
        

말줄임 처리

1줄 말줄임 (truncate)

이것은 매우 긴 텍스트입니다. 1줄 말줄임 처리가 적용되어야 합니다.

          <Typography class="text-body-14-regular text-sk-primary-default truncate">긴
          텍스트...</Typography>
        

2줄 말줄임 (line-clamp-2)

이것은 매우 긴 텍스트입니다. 2줄 말줄임 처리가 적용되어야 합니다.

          <Typography class="text-body-12-regular text-sk-primary-default line-clamp-2">긴
          텍스트...</Typography>
        

Props

Prop	Type	Default	Description
`tag`	keyof HTMLElementTagNameMap	"div"	HTML 태그
`text`	string	-	텍스트 내용 (선택적, slot도 지원). `<br>` 태그는 안전하게 렌더링되며, 다른 HTML은 이스케이프됩니다.
`class`	string	-	Tailwind 클래스로 모든 스타일 지정 (폰트 크기, 색상, 굵기, 자간, 말줄임 등)