Skip to main content

Layout

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/primitives/Layout/ (package @dtsl/naos-primitives, exported as AppGrid, AgHeader, AgSidebar, AgContent, AgAside, AgFooter, GUTTERS, RAILS)

Entry file exports (verbatim from index.js):

// Direct re-exports from individual component files (tree-shakeable, no barrel)
export { default as AppGrid } from './AppGrid/AppGrid'
export { default as AgHeader } from './AppGrid/AgHeader'
export { default as AgSidebar } from './AppGrid/AgSidebar'
export { default as AgContent } from './AppGrid/AgContent'
export { default as AgAside } from './AppGrid/AgAside'
export { default as AgFooter } from './AppGrid/AgFooter'
export { GUTTERS, RAILS } from './constants'

This is a page-shell layout system (header/sidebar/content/aside/footer regions), distinct from the Grid/Column content-layout primitive documented separately at grid.

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. Grid for in-page content layout rather than page shell).

Decision Logic​

TODO — needs UX/product input on which Ag* sub-components are required vs optional for a given page shell.

Accessibility​

TODO — needs UX/product input. Landmark regions (header/nav/main/aside/footer) typically carry real ARIA-landmark implications — needs verification against actual implementation, not assumed here.

Common Mistakes​

TODO — needs UX/product input.