CSS: billboard

.instui-billboard — 큰 빈 상태 또는 행동 유도 블록: 히어로 아이콘 또는 이미지, 제목, 그리고 메시지.

The .hero/.heading/.message parts are composed by the consumer's markup, not enforced structure; -clickable only adds hover styling, so a real click target still needs tabindex and a keyboard handler.

Source: billboard.css

사용법

@import "@pantoken/components/components.css";
@import "@pantoken/components/billboard.css";

예제들

<div class="instui-billboard -size-md -clickable" tabindex="0">
  <span class="hero -icon-inbox"></span>
  <div class="heading">No items yet</div>
  <div class="message">Create your first item to get started.</div>
</div>

구조

.instui-billboard
  hero (component, 0..1)
  heading (component)
  .message

flowchart TD n0[".instui-billboard"]:::cssdoc-root n1(["hero"]):::cssdoc-component n2(["heading"]):::cssdoc-component n3(".message"):::cssdoc-part n0 -.->|0..1| n1 n0 --> n2 n0 --> n3 click n1 "/api/css/hero.md" click n2 "/api/css/heading.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자

수정자	설명
.-clickable	호버 피드백이 있는 인터랙티브(클릭 가능한) 스타일.
.-icon-*	.hero에 선행 아이콘 글리프를 렌더링합니다(예: <span class="hero -icon-inbox"></span>).
.-size-large	{@link -size-lg}의 장문 별칭.
.-size-lg	Large: roomier spacing with larger heading, message, and hero icon.
.-size-md	Medium(기본): 중간 크기 제목·메시지·히어로 아이콘과 표준 간격.
.-size-medium	{@link -size-md}의 장문 별칭.
.-size-sm	Small: tighter spacing with smaller heading, message, and hero icon.
.-size-small	{@link -size-sm}의 장문 별칭.

부분

부분	설명
.heading	빌보드 제목.
.hero	선택적 선행 아이콘 또는 이미지.
.message	보조 메시지.

사용된 토큰

Token	타입	값
--instui-color-text-base	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-component-billboard-background-color	<color>	#00000000
--instui-component-billboard-button-border-radius	<length>	0.5rem
--instui-component-billboard-button-border-style	—	solid
--instui-component-billboard-button-border-width	<length>	0.125rem
--instui-component-billboard-clickable-active-bg	<color>	LightDarklight-dark(#44709F, #2E5177)
--instui-component-billboard-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-billboard-large-margin	<length>	1.5rem
--instui-component-billboard-medium-margin	<length>	0.75rem
--instui-component-billboard-padding-large	<length>	1.5rem
--instui-component-billboard-padding-medium	<length>	1.5rem
--instui-component-billboard-padding-small	<length>	0.75rem
--instui-component-icon-illu-lg	<length>	10rem
--instui-component-icon-illu-md	<length>	5rem
--instui-component-icon-illu-sm	<length>	3rem
--instui-component-link-on-color-text-color	<color>	#ffffff
--instui-component-link-text-color	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-component-text-font-size-x-x-large	<length>	2.375rem
--instui-focus-outline-color	auto | <color>	—
--instui-focus-outline-offset	<length>	—
--instui-focus-outline-style	auto | <outline-line-style>	—
--instui-focus-outline-width	<line-width>	—
--instui-font-size-text-base	<length>	1rem
--instui-font-size-text-sm	<length>	0.875rem
--instui-spacing-space-sm	<length>	0.5rem
--instui-spacing-space-xs	<length>	0.25rem

브라우저 지원

• CSS @scope at-rule로 요소 스타일을 포함합니다; 최신 Chromium, Firefox 또는 Safari가 필요합니다.

하위 컴포넌트

• heading
• hero