CSS: heading ​

.instui-heading — -level-h1에서 -level-h6까지의 헤딩 타이포그래피.

-variant-* 프리셋은 -level-*의 font-size와 font-weight를 재정의하므로 요소당 각 패밀리에서 하나만 조합하세요.

Source: heading.css

접근성 ​

이 클래스들은 시각적 레벨만 설정하므로 실제 <h1>–<h6>를 렌더링하거나(또는 role="heading"를 aria-level와 함께 사용하여) 헤딩 레벨을 전달하세요.

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/heading.css";

예제들 ​

html
<div class="instui-heading -level-h1">Heading h1</div>

수정자 ​

수정자설명
.-border-bottom하단 규칙 추가.
.-border-top상단 규칙 추가.
.-color-aiAI 악센트 색상.
.-color-primary(기본값) 주요 색상.
.-color-primary-inverse다크 배경용(주요 반전) 색상.
.-color-secondary보조(은은한) 색상.
.-level-h1h1 타입 스케일에서 렌더링.
.-level-h2h2 타입 스케일에서 렌더링.
.-level-h3h3 타입 스케일에서 렌더링.
.-level-h4h4 타입 스케일에서 렌더링.
.-level-h5h5 타입 스케일에서 렌더링.
.-level-h6h6 타입 스케일에서 렌더링.
.-variant-label라벨 타입 프리셋.
.-variant-title-card-mini미니 카드 제목 프리셋.
.-variant-title-card-regular일반 카드 제목 프리셋.
.-variant-title-card-section카드 섹션 제목 프리셋.
.-variant-title-page페이지 제목 프리셋.
.-variant-title-section섹션 제목 프리셋.

사용된 토큰 ​

Token타입값
--instui-component-heading-ai-text-bottom-gradient-color<color>LightDarklight-dark(#027887, #3CC0D4)
--instui-component-heading-ai-text-top-gradient-color<color>LightDarklight-dark(#944FB3, #CAA1D9)
--instui-component-heading-base-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-heading-border-color<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-heading-border-padding<length>0.125rem
--instui-component-heading-border-width<length>0.0625rem
--instui-component-heading-h1-font-family[ <font-family-name> | <generic-font-family> ]#Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-heading-h1-font-size<length>2.5rem
--instui-component-heading-h1-font-weight<integer>700
--instui-component-heading-h2-font-size<length>1.75rem
--instui-component-heading-h2-font-weight<integer>600
--instui-component-heading-h3-font-size<length>1.25rem
--instui-component-heading-h3-font-weight<integer>700
--instui-component-heading-h4-font-size<length>1rem
--instui-component-heading-h4-font-weight<integer>700
--instui-component-heading-h5-font-size<length>0.875rem
--instui-component-heading-h5-font-weight<integer>600
--instui-component-heading-h6-font-size<length>0.75rem
--instui-component-heading-h6-font-weight<integer>600
--instui-component-heading-inverse-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-heading-label-font-size<length>1rem
--instui-component-heading-label-font-weight<integer>700
--instui-component-heading-line-height<percentage>125%
--instui-component-heading-muted-color<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-heading-title-card-mini-font-size<length>1rem
--instui-component-heading-title-card-mini-font-weight<integer>700
--instui-component-heading-title-card-regular-font-size<length>1.25rem
--instui-component-heading-title-card-regular-font-weight<integer>700
--instui-component-heading-title-card-section-font-size<length>1.75rem
--instui-component-heading-title-card-section-font-weight<integer>700
--instui-component-heading-title-page-desktop-font-size<length>2.5rem
--instui-component-heading-title-page-desktop-font-weight<integer>700
--instui-component-heading-title-section-font-size<length>1.75rem
--instui-component-heading-title-section-font-weight<integer>700

관련 항목 ​

  • text — 비헤딩 텍스트용 본문 타이포그래피.