CSS: billboard

.instui-billboard — A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.

Source: billboard.css

Usage

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

Examples

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

Structure

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

Modifiers

Modifier	Description
.-clickable	Interactive (clickable) styling with hover feedback.
.-icon-*	Render a leading icon glyph on .hero (e.g. <span class="hero -icon-inbox"></span>).
.-size-large	Long-form alias of {@link -size-lg}.
.-size-lg	Large: roomier spacing with larger heading, message, and hero icon.
.-size-md	Medium (default): standard spacing with medium heading, message, and hero icon.
.-size-medium	Long-form alias of {@link -size-md}.
.-size-sm	Small: tighter spacing with smaller heading, message, and hero icon.
.-size-small	Long-form alias of {@link -size-sm}.

Parts

Part	Description
.heading	The billboard heading.
.hero	The optional leading icon or image.
.message	The supporting message.

Tokens consumed

Token	Type	Value
--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

Browser support

• Contains its element styles with the CSS @scope at-rule; needs a recent Chromium, Firefox, or Safari.