컨테이너 / hero
Hero
페이지 첫 화면 — eyebrow·title(h1)·subtitle·badges·actions·image 슬롯.
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
페이지 첫 화면 — eyebrow·title(h1)·subtitle·badges·actions·image 슬롯.
Workbench 불러오는 중…
Component intent의도와 경계 읽기
랜딩/문서 인덱스 상단의 공통 골격. title 은 항상 <h1> 로 렌더되고 useId 로 만든 id 를 section 의 aria-labelledby 로 연결한다. image 슬롯을 주면 데스크톱(≥768px)에서 2-col, 없으면 1-col. size 로 타이틀 티어(md/lg/xl + 마케팅용 display 32~80px fluid)를, align 으로 좌/중앙 정렬을 고른다.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
마케팅 히어로(display·center)
import { Hero, Badge, Button } from "@axe/ui";<Hero eyebrow={<Badge>AXE Labs</Badge>} title={<>AI-native <span>ERP</span></>} subtitle="소싱부터 결산까지, 하나의 통제 평면." actions={<Button variant="primary">시작하기</Button>} size="display" align="center"/>2-col(image 슬롯)
import { Hero, Button } from "@axe/ui";<Hero title="포트폴리오를 한눈에" subtitle="KPI·리스크·엑싯 신호를 하나의 보드에서." actions={<Button variant="primary">데모 보기</Button>} image={<img src="/board.png" alt="포트폴리오 보드 스크린샷" />}/>CSS-only (비-React, 브랜드 워시)
<section class="axe-hero axe-hero--size-display axe-hero--center axe-hero--brand" aria-labelledby="hero-t"> <div class="axe-hero__content"> <div class="axe-hero__eyebrow">AXE Labs</div> <h1 id="hero-t" class="axe-hero__title">미래를 <em>설계</em>하다</h1> <p class="axe-hero__subtitle">소싱부터 결산까지.</p> <div class="axe-hero__actions"> <button class="axe-btn axe-btn--primary">시작하기</button> </div> </div></section>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
title | React.ReactNode | 필수 | — | h1 내용(`.axe-hero__title`). ReactNode 라 <br/>·<span> 자유. HTMLAttributes 의 title 은 이 prop 으로 대체됨. |
eyebrow | React.ReactNode | — | — | title 위 작은 상단 라벨(Badge 등). 앞에 브랜드 점 ::before 가 붙는다. |
subtitle | React.ReactNode | — | — | 부제 문단(`.axe-hero__subtitle`). |
badges | React.ReactNode | — | — | title 아래 Badge cluster. |
actions | React.ReactNode | — | — | CTA 버튼 묶음(`.axe-hero__actions`). |
image | React.ReactNode | — | — | 우측 비주얼 슬롯. 지정하면 axe-hero--with-image 로 데스크톱 2-col 이 된다. |
align | "left" | "center" | — | "left" | 콘텐츠 정렬. center 는 텍스트·badges·actions 를 중앙 정렬. |
size | "md" | "lg" | "xl" | "display" | — | "lg" | 타이틀 크기 티어. display 는 랜딩/마케팅 전용 디스플레이 티어(32~80px fluid). |
...rest | Omit<React.HTMLAttributes<HTMLElement>, "title"> | — | — | className 병합, 나머지는 루트 <section> 으로 전파. aria-labelledby 를 명시하면 자동 생성 h1 id 대신 그 값을 쓴다. |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-hero | stable | 루트 <section> — grid 레이아웃. |
.axe-hero--with-image | stable | image 슬롯 존재 — ≥768px 에서 1.1fr/1fr 2-col. |
.axe-hero--center | stable | 중앙 정렬 변형. |
.axe-hero--size-md | stable | 타이틀 3xl 티어. |
.axe-hero--size-lg | stable | 타이틀 4xl 티어(기본). |
.axe-hero--size-xl | stable | 타이틀 5xl 티어. |
.axe-hero--size-display | stable | 디스플레이 티어 — display-md fluid + 넓은 content/subtitle. |
.axe-hero__content | stable | 좌측 텍스트 컬럼(flex column, max 42rem). |
.axe-hero__eyebrow | stable | 상단 라벨 — uppercase·tracking-widest, 브랜드 점 ::before. |
.axe-hero__title | stable | h1 타이틀 — display 폰트. |
.axe-hero__subtitle | stable | 부제 문단. |
.axe-hero__badges | stable | Badge cluster(flex wrap). |
.axe-hero__actions | stable | CTA 버튼 row(flex wrap). |
.axe-hero__image | stable | 우측 비주얼 슬롯 컨테이너. |
.axe-hero--brand | stable | 브랜드 와인 radial wash + Clash 타이틀 페이스. prop 미노출 — className 으로 opt-in. 내부 <em> 은 브랜드 색 키워드 강조. |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
ARIA
루트 <section> 이 aria-labelledby 로 <h1 id> 과 연결되어 landmark 이름을 갖는다(id 는 useId 자동, aria-labelledby prop 으로 override 가능).
Notes
title 은 항상 <h1> 이므로 문서 개요상 페이지당 Hero 는 하나로 유지한다(h1 중복 회피). image 슬롯은 장식이면 소비자가 내부에서 aria-hidden/빈 alt 를 준다.
06 · Judgment