Components/Heading

Heading

1.0.026 Aug, 2021
Design/ContentsCompleted
CodeCompleted
헤딩(Heading)은 페이지 및 템플릿의 역할 및 기능을 나타내는 컴포넌트입니다. 텍스트와 관련 엘리먼트가 결합한 컴포넌트로 정보 계층 구조에 따라 사용을 유의합니다.
Components

Anatomy

Anatomy
1. Tile2. Text Button(or Label)

Variants

Basic
Basic

Basic은 가장 기본적인 형태로 텍스트 단독으로 사용합니다. 페이지 또는 템플릿, 모듈 단위에 따라 컨텐츠 소비 및 안내가 필요할 경우 사용합니다.

Text Button
Text Button

Text Button은 타이틀 우측에 텍스트 버튼을 결합해 사용합니다. 타이틀에 관한 네비게이션 이동 시 우측 버튼(전체보기 또는 더보기)을 선택적으로 사용합니다.

Label
Label

Label은 타이틀 우측 라벨을 결합한 스타일입니다. AI 라벨은 큐레이션형 모듈에서 한정해 사용합니다.

AD Label
AD Label

AD Label은 타이틀 우측 광고 표기 라벨을 결합한 스타일입니다. 내부 큐레이션이 아닌 광고 집행에 의한 추천 모듈에 한정해 사용합니다.

‘검색을 통한 광고’는 소비자 오인의 가능성이 보다 높음으로 ‘광고’라고 한글로 표기하고, ‘배너형 광고’는 소비자 오인의 가능성이 보다 낮음으로 ‘AD’라고 영어로 표기합니다.

SizeSize
Size

사이즈는 height 기준으로 Large, Small을 사용합니다.
Large 사이즈는 가장 기본적인 타이틀로 사용하며, 모듈 단위 타이틀로 사용합니다. Small 사이즈는 모듈 단위 서브 타이틀로 사용됩니다.

Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
LayoutBasic, Text button, LabelBasic
SizeLarge, SmallLarge
AlignLeft, CenterLeft

Usage Guidelines

Do : Title 최소 1줄에서 최대 2줄 사용

타이틀은 페이지 및 모듈의 역할을 집약적으로 설명하여, 가독성을 고려해야 하므로 최소 1줄에서 최대 2줄로 사용합니다.

Don’t : Title 3줄 사용

앞서 언급한 타이틀 주요 기능인 가독성 이슈로 3줄 이상 사용은 제한합니다. 이외 예외 케이스로 구어체를 활용한 경우는 제외합니다.


Spec

Size

Heading의 너비와 높이는 텍스트에 따라 가변 가능합니다. 상/하 마진은 8, 좌/우 마진은 16으로 고정됩니다.

SizeSize
담당자구경하@kykoo

이전글
Dropdowns
다음글
Info boxes