CSS: billboard

.instui-billboard — Egy nagy üres állapot vagy cselekvésre felszólítás blokk: egy hős ikon vagy kép, egy fejléc, és egy üzenet.

Forrás: billboard.css

Használat

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

Példák

<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>

No items yet

Create your first item to get started.

Felépítés

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

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

Módosítók

Módosító	Leírás
.-clickable	Interaktív (kattintható) stílusozás lebegő visszajelzéssel.
.-icon-*	Ábrázoljon egy vezető ikon karaktert a .hero-en (pl. <span class="hero -icon-inbox">&lt;/span&gt;).
.-size-large	Hosszú forma alias a {@link -size-lg}.
.-size-lg	Nagy: tágas szóköz nagyobb fejléc, üzenet és hős ikon.
.-size-md	Közép (alapértelmezett): standard szóköz közép fejléc, üzenet és hős ikon.
.-size-medium	Hosszú forma alias a {@link -size-md}.
.-size-sm	Kicsi: szűkebb szóköz kisebb fejléc, üzenet és hős ikon.
.-size-small	Hosszú forma alias a {@link -size-sm}.

Részek

Rész	Leírás
.heading	A billboard fejléc.
.hero	A választható vezető ikon vagy kép.
.message	A támogató üzenet.

Felhasznált tokenek

Token	Típus	Érték
--instui-color-text-base	<color>	light-dark(#273540, #F2F4F5)LightDark
--instui-component-billboard-background-color	<color>	#00000000
--instui-component-billboard-button-border-radius	<length>	0.5rem
--instui-component-billboard-button-border-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset	solid
--instui-component-billboard-button-border-width	<length>	0.125rem
--instui-component-billboard-clickable-active-bg	<color>	light-dark(#B6CCEA, #2E5177)LightDark
--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>	light-dark(#2369A4, #7FB4F1)LightDark
--instui-component-text-font-size-x-x-large	<length>	2.375rem
--instui-focus-outline-color	<color> | invert	—
--instui-focus-outline-offset	<length>	—
--instui-focus-outline-style	auto | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset	—
--instui-focus-outline-width	<length>	—
--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

Böngészőtámogatás

• Tartalmazza az elem stílusait a CSS @scope szabállyal; szükséges egy friss Chromium, Firefox, vagy Safari.