컬러 토큰

Text / Primary / Default

Text / Primary / Foreground

Accent / Strong

Accent / Default

Text / Secondary / Disabled_1

Text / Secondary / Disabled_2

          <Title level=1 class="text-sk-primary-default">제목</Title> <Title level=1 class="text-sk-primary-foreground">제목</Title> <Title level=1 class="text-sk-accent-strong">제목</Title>
          <Title level=1 class="text-sk-accent">제목</Title> <Title level=1 class="text-sk-secondary-disabled-1">제목</Title>
          <Title level=1 class="text-sk-secondary-disabled-2">제목</Title>
        

타이포그래피 토큰

Heading 38px Bold

제목 38px Bold

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

Heading 30px Medium

제목 30px Medium

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

Heading 16px Regular

제목 16px Regular

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

Body 14px Regular

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

Body 12px Regular

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

말줄임 처리

1줄 말줄임 (truncate)

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

          <Title level=1 class="text-heading-38-bold text-sk-primary-default truncate">긴 제목...</Title>
        

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

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

          <Title level=1 class="text-heading-30-medium text-sk-primary-default line-clamp-2">긴
          제목...</Title>
        

Props

Prop	Type	Default	Description
`level`	1 \| 2 \| 3 \| 4 \| 5 \| 6	-	제목 레벨 (h1-h6 태그 결정). 지정하지 않으면 div
`text`	string	-	텍스트 내용 (선택적, slot도 지원)
`class`	string	-	Tailwind 클래스로 모든 스타일 지정 (폰트 크기, 색상, 굵기, 자간, 말줄임 등)