File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-18
08-14
08-14
08-14
08-18
08-18
08-14
08-18
08-18
// FoxHeadingGroup — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) heading-group (3002:7177)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-heading-group">
// <div class="fox-heading-group__text">
// <div class="fox-heading-group__heading"><h2 class="fox-heading-group__title">제목</h2></div>
// <p class="fox-heading-group__description">설명</p> <!-- 선택 -->
// </div>
// <div class="fox-heading-group__actions">…</div> <!-- 선택 -->
// </div>
//
// 제목 줄이 따로 있는 이유는 시안이 그 안에 아이콘·배지를 함께 세울 자리를 두기 때문이다
// (지금은 제목 하나뿐이지만 8px 간격이 이미 잡혀 있다).
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일 display/sm의 값이나 Figma가 변수로
// export하지 않는다. -0.65px은 26px 기준이라 `-0.025em`으로 적는다(다른 컴포넌트와 같은 근거).
// - margin 0: 제목 태그의 브라우저 기본값 지우기.
@use "abstracts" as fox;
.fox-heading-group {
display: flex;
inline-size: 100%;
align-items: center;
gap: fox.gap(5);
// 뒤따르는 도구 줄·표가 간격을 따로 두지 않게 이 조각이 아래 여백을 갖는다.
padding-block-end: fox.spacing(bottom-md);
&__text {
display: flex;
flex: 1 0 0;
min-inline-size: 0;
flex-direction: column;
}
&__heading {
display: flex;
inline-size: 100%;
align-items: center;
gap: fox.gap(3);
}
&__title {
margin: 0;
color: fox.color(font-neutral-strong);
font-family: fox.font-family(title);
font-size: fox.font-size(display-sm);
font-weight: fox.font-weight(bold);
line-height: 1.5;
letter-spacing: -0.025em;
}
&__description {
margin: 0;
color: fox.color(font-neutral-subtle);
font-family: fox.font-family(body);
font-size: fox.font-size(body-md);
font-weight: fox.font-weight(regular);
line-height: 1.5;
letter-spacing: -0.025em;
}
&__actions {
display: flex;
flex-shrink: 0;
align-items: center;
gap: fox.gap(3);
}
}