Section
먼저 보고, 그다음 계약을 읽습니다
페이지 본문 한 블록 — eyebrow·heading·subtitle 헤더 + children 본문.
Component intent의도와 경계 읽기
본문을 의미 단위로 끊는 표준 섹션. heading 은 headingLevel(h1/h2/h3, 기본 h2)로 시맨틱 레벨만 바꾸고 시각 크기는 항상 section 스타일로 고정한다. id 를 주면 anchor link target 이 되고, scroll-margin-top 5rem 이 자동 적용되어 sticky TopNav 에 가려지지 않는다. heading id 는 useId 로 만들어 section 의 aria-labelledby 로 연결된다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Section } from "@axe/ui";<Section id="features" eyebrow="Platform" title="하나의 통제 평면" subtitle="7개 MCP 서비스가 같은 SSOT 를 공유합니다."> <p>frame·hive·gate·index·matrix·cortex·blueprint 이 한 축으로 묶입니다.</p></Section>import { Section } from "@axe/ui";<Section align="center" headingLevel="h3" title="자주 묻는 질문"> <FaqList /></Section><section id="features" class="axe-section" aria-labelledby="sec-t"> <header class="axe-section__header"> <div class="axe-section__eyebrow">Platform</div> <h2 id="sec-t" class="axe-section__title">하나의 통제 평면</h2> <p class="axe-section__subtitle">7개 MCP 서비스가 같은 SSOT 를 공유합니다.</p> </header> <div class="axe-section__body">…</div></section>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
title | React.ReactNode | 필수 | — | heading 내용(`.axe-section__title`). HTMLAttributes 의 title 은 이 prop 으로 대체됨. |
id | string | — | — | anchor link target. 지정 시 scroll-margin-top 이 자동 적용된다. |
eyebrow | React.ReactNode | — | — | title 위 작은 라벨(Badge 등). 앞에 neutral marker ::before 가 붙는다. |
subtitle | React.ReactNode | — | — | 부제 문단(`.axe-section__subtitle`, max 56ch). |
headingLevel | "h1" | "h2" | "h3" | — | "h2" | heading 의 시맨틱 레벨만 결정 — 시각 크기는 항상 section 스타일. 문서 개요에 맞춰 고른다. |
align | "left" | "center" | — | "left" | 정렬. center 는 헤더·subtitle 을 중앙 정렬. |
children | React.ReactNode | — | — | 본문 콘텐츠 — `.axe-section__body` 안에 렌더. |
...rest | Omit<React.HTMLAttributes<HTMLElement>, "title"> | — | — | className 병합, 나머지는 루트 <section> 으로 전파. aria-labelledby 를 명시하면 자동 생성 heading id 대신 그 값을 쓴다. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-section | stable | 루트 <section> — flex column, scroll-margin-top 5rem. |
.axe-section--center | stable | 중앙 정렬 변형(text-align + align-items center). |
.axe-section__header | stable | eyebrow+title+subtitle 묶음. |
.axe-section__eyebrow | stable | 상단 라벨 — uppercase·tracking-widest, neutral marker ::before. |
.axe-section__title | stable | heading — display 폰트·2xl(레벨과 무관하게 고정 시각 크기). |
.axe-section__subtitle | stable | 부제 문단(secondary·max 56ch). |
.axe-section__body | stable | children 본문 컨테이너. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
루트 <section> 이 aria-labelledby 로 heading id 와 연결되어 이름 있는 landmark 가 된다(id 는 useId 자동, aria-labelledby prop override 가능).
headingLevel 은 시각 크기가 아니라 문서 heading outline 을 맞추기 위한 것 — 페이지 구조(h1 아래 h2, 그 아래 h3)에 맞게 고른다. scroll-margin-top 5rem 이 sticky TopNav 로 인한 anchor jump 가림을 보정한다.