CSS: billboard

.instui-billboard — 大きな空状態またはコールトゥアクションのブロック：ヒーローアイコンまたは画像、見出し、メッセージ。

.hero/.heading/.message の部分は消費者のマークアップで構成されるもので、強制された構造ではありません；-clickable はホバー時のスタイルのみを追加するので、実際のクリック対象には tabindex とキーボードハンドラが依然として必要です。

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	中（デフォルト）：中程度の見出し、メッセージ、ヒーローアイコンを備えた標準的な間隔。
.-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