XDS — Design System

XDSLayoutContent@xds/core · Layout

Preview coming soon

Usage

Layout provides composable components for building structured page shells with header, sidebar, content, and footer slots. Use XDSLayout for full app layouts and XDSHStack/XDSVStack for simple directional stacking.

Best practices

Guidance	Practices
Do	Use XDSLayout for page shells that need distinct zones like header, sidebar(s), content, and footer.
Do	Use XDSHStack and XDSVStack for simple directional stacking within a content area.
Don't	Use XDSLayout for simple stacking layouts — use XDSHStack or XDSVStack instead.
Don't	Nest multiple XDSLayout components — use one per page shell and compose content within its slots.

Import

ts
import {XDSLayoutContent} from '@xds/core/Layout'

Props

Prop	Type	Description
children	ReactNode	Content.
isScrollable	boolean (default: true)	Enable scrollable overflow.
label	string	Accessible label for the landmark element.
role	AriaRole	ARIA landmark role.

Showcase source

tsx
'use client';
import {
  XDSLayout,
  XDSLayoutContent,
  XDSLayoutHeader,
  XDSLayoutFooter,
  XDSLayoutPanel,
  XDSCard,
  XDSVStack,
} from '@xds/core/Layout';
import {XDSCenter} from '@xds/core/Center';
import {XDSText, XDSHeading} from '@xds/core/Text';
export default function LayoutContentShowcase() {
  return (
    <XDSCenter width={600}>
      <XDSLayout
        height="fill"
        header={
          <XDSLayoutHeader hasDivider>
            <XDSCard variant="muted" />
          </XDSLayoutHeader>
        }
        start={
          <XDSLayoutPanel hasDivider width={140}>
            <XDSCard variant="muted" />
          </XDSLayoutPanel>
        }
        content={
          <XDSLayoutContent role="main">
            <XDSVStack gap={3}>
              <XDSHeading level={5}>Main Content Area</XDSHeading>
              <XDSText type="body" color="secondary">
                LayoutContent provides automatic padding and scroll containment.
                It fills the remaining space between the header and footer.
              </XDSText>
              <XDSText type="body" color="secondary">
                Content that overflows will scroll within this area while the
                header and footer remain fixed.
              </XDSText>
            </XDSVStack>
          </XDSLayoutContent>
        }
        footer={
          <XDSLayoutFooter hasDivider>
            <XDSCard variant="muted" />
          </XDSLayoutFooter>
        }
      />
    </XDSCenter>
  );
}