Ligantic
Docs
Tutorials
How-to guides
Reference
Explanation
Login
Free Sign Up
Docs
/
Reference
/
Experiences

Experience States and Print Layout

Scope: Shared state model for Experience blocks

State Model

Block states entries are optional and support three id classes:

  • Pseudo-state IDs: hover, active, focus, enabled, readonly, visited, selected, disabled
  • Media state IDs: media-print, media-below-768, media-above-1200
  • Generated custom IDs: sxxxxxx matching ^s[a-f0-9]{6}$

State entry shape:

  • id
  • name?
  • activation?.when? for datum-driven states
  • overrides as partial block props

Media states do not require activation expressions.

Media States

State ID

Label

Emitted CSS

media-print

Print

@media print

media-below-768

Small screens (below 768px)

@media (max-width: 767.98px)

media-above-1200

Large screens (1200px and up)

@media (min-width: 1200px)

Availability:

  • Media states are available for all block types (Box, Link, Text, Image, Video, Audio, Button, Input, and Visualisation blocks).
  • Pseudo-state availability depends on block type.

Page-Break Properties

Shared block props include print/page break controls.

Property

Type

CSS property

breakBefore

"auto" | "page" | "avoid"

break-before

breakAfter

"auto" | "page" | "avoid"

break-after

breakInside

"auto" | "avoid"

break-inside

These properties can be set directly on a block or through state overrides (including print-only media states).

Display and Hidden Blocks

display accepts:

  • none
  • inline-flex
  • flex
  • inline-grid
  • grid

When display: none is set through a media state (for example media-print), the block is excluded for that media context and layout reflows naturally.

Related pages

Experience Blocks Reference
This reference documents all currently defined Experience block types in Ligantic.
Experience - Pdf - Create
Renders a published Experience with the app target in headless Chromium using print media mode, then creates and uploads a PDF file. The node emits the created PDF as a file handle for downstream nodes.
Experiences Reference Overview
This section contains reference documentation for Ligantic Experience schemas and block types.
How to Export an Experience as a PDF
This guide shows you how to style an Experience for print, generate a PDF in a Flow, and return that PDF to the user as a browser download.
UX - Action
The UX - Action node triggers actions in the user interface of an Experience. It can navigate to different pages or Experiences, update data in the UI, trigger data refetches, or trigger file downloads. This enables Flows to control the user experience dynamically.