Matched by default, mixed by design
Swap shells without swapping UI style.
UI styles and layout designs work best together, but they are intentionally independent. Try
data-ui="cyberpunk", data-layout="maximalist",
data-theme="arctic-indigo", and data-mode="dark".
Primary workspace
The markup stays fixed while the selected layout style changes the shell, split, pane, and auto-grid composition.
Layout Recipes
Recipe-style organization for major wrapper contracts.
Start with a recipe, then mix UI style, layout style, theme, and mode without changing the wrapper contract.
App shell
Use one root shell for a persistent header, sidebar, and main workspace.
.ly-app-shell
.ly-app-header
.ly-app-sidebar
.ly-app-main
Content page
Use a readable wrapper for documentation, articles, and focused landing sections.
.ly-wrapper
.ly-wrapper--readable
.ly-section
.ly-stack
Card grid
Use auto-fit tracks for cards that collapse from desktop to tablet and mobile.
.ly-wrapper--wide
.ly-card-grid
.ly-surface
Split hero
Use a split when one message needs a supporting panel or interactive preview.
.ly-wrapper--xl
.ly-split
.ly-stack
.ly-frame
Docs sidebar
Use a local sidebar inside the main content when the global shell is not enough.
.ly-sidebar-layout
.ly-sidebar-layout--right
.ly-sidebar
.ly-content
List detail
Use adaptive panes for inboxes, editors, queues, and preview-driven workflows.
.ly-panes
.ly-panes--two
.ly-scroll-area
.ly-surface
Button group
Use a wrapping action row without forcing buttons to fill the mobile viewport.
.ly-button-group
.saas-button-group
Card size
Use sizing helpers when cards need consistent rhythm without hard-coded visual styles.
.ly-card-sm
.ly-card-md
.ly-card-lg
.saas-card-grid
Gallery
Use gallery tracks for image or media groups that should reflow without a script.
.ly-gallery
.rg-gallery
Carousel
Use horizontal snap tracks for preview rows while keeping card visuals external.
One
Two
Three
.ly-carousel
.bento-carousel
Frame and scroll
Use frames for media ratios and scroll areas for bounded content regions.
.ly-frame
.ly-frame-16x9
.ly-scroll-area
.ly-overflow-auto