FG UI Development Laboratory

Layout & nesting

Exercise real FG UI layout primitives, nesting and composition without page-specific CSS.

Live FGUI-DEV
IMPLEMENTED IN FG UI

This page uses the exact live FGUI-DEV runtime with no Laboratory CSS or JavaScript.

Responsive grid

Resize the browser. No Laboratory media queries exist to help this page.

One

First card

Short content.

Two

Second card with a longer heading

This card contains more copy to expose uneven content heights and wrapping behaviour.

Three

Third card

AlphaBetaGamma

Split layout

Two independent FG UI surfaces in the real split primitive.

Main content

The split should remain readable as the viewport becomes narrower.

Sidebar layout

A navigation/sidebar composition at real page width.

Content area

The main area contains normal FG UI components rather than special Laboratory layout CSS.

Sidebar and content remain independent surfaces.

Nested card A

Nested inside the sidebar composition.

Nested card B

Useful for spotting unexpected inherited styles.