XDSStackItem@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

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

Import

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

Showcase source

tsx
'use client';
​
import {XDSHStack, XDSStackItem} from '@xds/core/Layout';
import {XDSCard} from '@xds/core/Card';
import {XDSText} from '@xds/core/Text';
​
export default function StackItemShowcase() {
  return (
    <XDSHStack gap={3} vAlign="center">
      <XDSStackItem size="static">
        <XDSCard variant="muted" padding={3}>
          <XDSText type="supporting" color="secondary">
            Static
          </XDSText>
        </XDSCard>
      </XDSStackItem>
      <XDSStackItem size="fill">
        <XDSCard variant="muted" padding={3}>
          <XDSText type="supporting" color="secondary">
            Fills remaining space
          </XDSText>
        </XDSCard>
      </XDSStackItem>
      <XDSStackItem size="static">
        <XDSCard variant="muted" padding={3}>
          <XDSText type="supporting" color="secondary">
            Static
          </XDSText>
        </XDSCard>
      </XDSStackItem>
    </XDSHStack>
  );
}