A wider screen, please

This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.

Morpheus v0.1.0
v0.1.0
Morpheus Components Layout Settings

Layout#

Component <neo-layout> is a CSS-only Flexbox container whose attributes are CSS flex properties and whose values are CSS values: one element that covers stacks, rows, wrapping clusters, and centered boxes, with no utility classes and no build step. Per-child flex behaviour rides on namespaced neo-* attributes on any flex child. You write no media queries of your own: a row that wraps reflows on its own as its width changes, and children that grow or shrink (neo-flex-grow, neo-flex-shrink) take up or give back space. The row-to-column breakpoints it does have (collapse, neo-hide-below, neo-show-below) are CSS container queries keyed to the nearest container ancestor’s width, not the viewport, so the same markup adapts inside a sidebar, a drawer, or a full page. Everything on this page is built only from the kit with no page-specific CSS; resize the live example to simulate a narrower screen, or reshape it with the parameters.

Composition
Wrapping cluster
Responsive grid
Responsive conditional rendering
Responsive collapse
align-items values
justify-content values
align-content values
Child attributes
Spacer
Split row and column gaps
Reverse direction
Inline flow
Deactivate Rename Duplicate
Delete New state Toggle autoplay
Projects Overview Activity Reports Filter New All Active Archived 6 of 18
Apollo In progress Alice Chen Updated 2d ago Open
Borealis Blocked Ben Ortiz Updated 2d ago Open
Cirrus In review Carla Mehta Updated 2d ago Open
Delta Shipped Dev Kumar Updated 2d ago Open
Equinox Planning Erin Park Updated 2d ago Open
Zephyr Backlog Zoe Lang Updated 2d ago Open
Helios In progress Hugo Diaz Updated 2d ago Open
Nimbus In review Nina Petrov Updated 2d ago Open
Orion Blocked Omar Said Updated 2d ago Open
Updated just now Load more
HTML CSS

The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.

Replace Patch

Signals

Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.

Patch

Reference#

Attributes #

NameTypeDefaultDescription
row, row-reverse, column, column-reversebooleannoneflex-direction, as a boolean attribute. Pick one; row is the default.
nowrap, wrap, wrap-reversebooleannoneflex-wrap, as a boolean attribute. Default nowrap.
align-items"flex-start" | "flex-end" | "center" | "stretch" | "baseline"noneCross-axis alignment. Its value is the literal CSS keyword, so the attribute reads like the flex rule it emits.
justify-content"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"noneMain-axis distribution. Its value is the literal CSS keyword, so the attribute reads like the flex rule it emits.
align-content"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"noneCross-axis distribution of wrapped lines; takes effect only with wrap. Its value is the literal CSS keyword, so the attribute reads like the flex rule it emits.
gap"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"noneSpacing between children on both axes. column-gap and row-gap override it per axis.
column-gap"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"noneSpacing between children along the row. Overrides gap on this axis.
row-gap"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"noneSpacing between wrapped lines. Overrides gap on this axis.
min-height"100vh" | "100%"noneMinimum-height preset.
inlinebooleannoneUse display: inline-flex.
containerbooleannoneNeo extension: make this a query container (container-type: inline-size) so a descendant's collapse reacts to this element's width.
collapse"sm" | "md" | "lg"noneNeo extension: fold a row to a column when the nearest container ancestor is narrower than the tier (40 / 48 / 64rem). Container-query based: reacts to the box, not the viewport.

Child attributes

Namespaced neo-* attributes set on any flex child. Each is neo- plus the CSS property it sets.

Attributes #

NameTypeDefaultDescription
neo-flex-grow"0" | "1"noneflex-grow. Set to 1 to fill; doubles as a spacer.
neo-flex-shrink"0" | "1"noneflex-shrink. Set to 0 to pin the size.
neo-flex-basis"0" | "auto" | "100%"noneflex-basis (CSS keywords only). For a fixed width set it via style (e.g. style="flex-basis: var(--neo-size-sidebar)").
neo-align-self"flex-start" | "flex-end" | "center" | "stretch" | "baseline"nonePer-child align-self override.
neo-width"100%"noneDefinite full width of the containing block.
neo-height"100%"noneDefinite full height of the containing block.
neo-min-width"0"nonemin-width:0, the flex min-size fix, in a row.
neo-min-height"0"nonemin-height:0, the flex min-size fix, in a column.
neo-overflow"visible" | "hidden" | "scroll" | "auto"noneOverflow behaviour.
neo-truncatebooleannoneNeo extension: single-line ellipsis truncation.
neo-hide-below"sm" | "md" | "lg"noneNeo extension: hide the child while the nearest container is narrower than the tier (40 / 48 / 64rem). Container-query based.
neo-show-below"sm" | "md" | "lg"noneNeo extension: show the child only while the nearest container is narrower than the tier (hidden at or above it).

Examples#

Composition#

A whole dashboard nested several levels deep and filling the stage. The root is a container, so as you drag the corner the navbar morphs across three layouts (links → search-icon, full buttons → an icon group) via neo-hide-below / neo-show-below, the cards reflow 3 → 2 → 1, and the dashboard scrolls vertically when it overflows. All box-relative, no viewport media queries.

ProjectsOverview Activity Reports Filter New All Active Archived 6 of 18
ApolloIn progress Alice ChenUpdated 2d agoOpen
BorealisBlocked Ben OrtizUpdated 2d agoOpen
CirrusIn review Carla MehtaUpdated 2d agoOpen
DeltaShipped Dev KumarUpdated 2d agoOpen
EquinoxPlanning Erin ParkUpdated 2d agoOpen
ZephyrBacklog Zoe LangUpdated 2d agoOpen
HeliosIn progress Hugo DiazUpdated 2d agoOpen
NimbusIn review Nina PetrovUpdated 2d agoOpen
OrionBlocked Omar SaidUpdated 2d agoOpen
 Updated just now Load more
HideHTMLTemplCSS

Wrapping cluster#

A row with wrap flows its children onto new lines as the stage narrows: the "cluster" shape for tags, chips, and filters.

design frontend backend infra docs testing release
HideHTMLTempl

Responsive grid#

Growing cards with a shared flex-basis form equal rows and wrap into fewer columns as the stage narrows. No breakpoints required.

Analytics
Automations
Customers
Reports
HideHTMLTemplCSS

Responsive conditional rendering#

Resize the stage below 40rem. The detailed label and text button hide, while compact replacements appear. The condition follows the nearest container, not the viewport.

Projects 3 active projects 3 activeCreate project
HideHTMLTempl

Responsive collapse#

A row folds to a single column when its nearest container ancestor drops below a tier. Drag the stage under 40rem and the three panels reflow from a row into a stack via a container query, so it tracks the box, not the viewport.

Source
Build
Deploy
HideHTMLTempl

align-items#

Demonstrates all possible values for align-items.

flex-start
flex-end
center
stretch
baseline
HideHTMLTemplCSS

justify-content#

Demonstrates all possible values for justify-content.

flex-start
flex-end
center
space-between
space-around
space-evenly
HideHTMLTemplCSS

align-content#

Demonstrates all possible values for align-content.

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch
HideHTMLTemplCSS

Child attributes#

Resize in both directions. The folder rail keeps its fixed basis, the main pane grows into the remaining space, its long title truncates instead of forcing the row wider, and the checklist scrolls when height runs out. Each behaviour comes from a neo-* attribute on the child that needs it.

Folders Inbox Drafts
 Quarterly planning and launch coordination5 unread
Launch checklist Design review notes and final assets Engineering handoff and QA schedule Documentation readiness review Customer announcement draft Post-launch monitoring plan
HideHTMLTemplCSS

Spacer#

A spacer is just an empty child that grows: drop a child with neo-flex-grow="1" between two groups and it soaks up the leftover space, pinning whatever follows to the far edge. Here it keeps Save to the right while Back and the title stay on the left.

Back Page title Save
HideHTMLTempl

Split row and column gaps#

column-gap spaces the children along the row; row-gap spaces the wrapped lines. Columns are tight (xs) and rows are loose (lg), so the chips stay close while wrapped lines get room. Narrow the stage to wrap them.

design frontend backend infra docs testing release staging
HideHTMLTempl

Reverse direction#

row-reverse and column-reverse flip the main-axis order so the first child renders last; the DOM order (and tab order) stays intact. Both groups list 1, 2, 3 in source.

row-reverse1 2 3 column-reverse1 2 3
HideHTMLTempl

Inline flow#

inline switches the container to display: inline-flex, so it sits in the text flow instead of forcing its own line, handy for an icon-and-label cluster inside running prose.

Status: operational(all systems go).

HideHTMLTempl

Settings

Theme

Default Sunshine Ocean Matrix Rose☀ ◐ ☾

Accessibility

Playgrounds

Server Simulator