CSS: hero

div[class~="instui-hero"] — 제목, 부제목 및 선택적 배경 이미지를 포함한 전체 폭 헤더 섹션.

✅ Hero를 사용해야 할 때:

• 눈에 띄는 페이지 헤더와 시각적 계층 구조가 필요할 때

• 페이지가 크고 시선을 끄는 오프닝 섹션의 혜택을 볼 때

• 배경 이미지나 그라디언트 강조를 포함하고 싶을 때 🚫 Hero를 사용하지 말아야 할 때:

• 단순한 페이지 헤더를 만드는 경우 — 대신 Page-Layout을 사용하세요

• 히어로가 중요한 콘텐츠와 경쟁하여 가독성을 해칠 경우 — 가독성을 우선시하세요

접근성

• 제목은 의미론적 구조를 위해 <h1> 태그 안에 넣으세요
• 배경 이미지를 사용하는 경우 텍스트와 충분한 색 대비를 제공하세요
• 콘텐츠에서 주의를 분산시킬 수 있는 비디오나 애니메이션의 자동 재생은 피하세요

사용법

@import "@pantoken/plugin-layouts/layouts.css";

슬롯

슬롯	설명
subtitle	히어로 부제목 콘텐츠
title	히어로 제목 콘텐츠

부분

부분	설명
.instui-actions	선택적 액션 버튼 또는 링크.
.instui-background	선택적 배경 레이어(이미지 또는 그라디언트).
.instui-content	히어로 텍스트와 액션을 담는 컨테이너.
.instui-overlay	텍스트 대비를 위한 선택적 반투명 오버레이.
.instui-subtitle	선택적 보조 텍스트 또는 설명.
.instui-title	메인 히어로 제목(일반적으로 <h1>).

의사 요소

의사 요소	설명
::before	—

상태

상태	설명
:optional	—

사용된 토큰

Token	타입	값
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

관련 항목

• card