Standard Layouts

Canonical docs now live at videoml.org/docs/stdlib.

All layouts are full-frame flex containers. Enable debugLayout (or the scene frame flag) to reveal dashed borders and labels for every region.

Layouts

Each layout below includes a live preview. These are interactive previews (not rendered MP4s).

Title Screen

Centered/vertically aligned title & subtitle; configurable entrances.

Chapter Heading

Large chapter number with layouts.

Content Screen

Reusable header + single content area. Title, subtitle, eyebrow, and logo are optional.

Two Column Screen

Header + two columns. Supports animated column ratios.

Three Column Screen

Header + three columns for wide-screen dashboards.

Grid Screen

Header + multi-tile grid. Use for dashboards or menus.

Debug Frame Labels

  • Page: “FlexPage root”
  • Header: “Header” (shows label/eyebrow/title/subtitle/logo)
  • Content: “Content”
  • Children: title-cased component name (e.g., “Bullet List Component”)

Composition Guidelines

  • Keep layouts independent from typography and color themes.
  • For TV/room viewing: larger padding and spacing; prefer justify="space-between" for vertical distribution in vertical stacks.
  • Logos: use logoFit="contain" to avoid distortion.