XDS — Design System

Section@xds/core · XDSSection v0.0.13

Usage

Section is a container that is used to create visual separation. Use the default variant for standard content (white), wash to emphasize or group related content (gray), and transparent for no background while still using Section's padding and dividers.

ts
import {XDSSection} from '@xds/core/Section'

Best practices

Guidance	Practices
Do	Start with the default variant. Use wash only to call attention to a specific region.
Do	Add dividers between same-background sections that need separation.

Examples

Common configurations, variations, and states.

Section — Default with WashA default section stacked with a full-width wash section. Shows how wash draws attention to a specific region like an upgrade prompt or banner.

tsx
'use client';
import {XDSSection} from '@xds/core/Section';
import {XDSStack} from '@xds/core/Layout';
import {XDSHeading, XDSText} from '@xds/core/Text';
import {XDSButton} from '@xds/core/Button';
import {XDSIcon} from '@xds/core/Icon';
import {CheckIcon} from '@heroicons/react/24/solid';
const FEATURES = [
  '10 team members',
  'Unlimited projects',
  'Priority support',
  'Advanced analytics',
];
export default function SectionDefaultWithWash() {
  return (
    <XDSStack direction="vertical" gap={0}>
      <XDSSection variant="section" padding={5}>
        <XDSStack direction="vertical" gap={3} hAlign="center">
          <XDSStack direction="vertical" gap={1} hAlign="center">
            <XDSText type="display-3">Pro Plan</XDSText>
            <XDSText type="body" color="secondary">
              Everything you need to scale your team.
            </XDSText>
          </XDSStack>
          <XDSStack direction="vertical" gap={2}>
            {FEATURES.map(feature => (
              <XDSStack
                key={feature}
                direction="horizontal"
                gap={2}
                vAlign="center">
                <XDSIcon icon={CheckIcon} size="sm" />
                <XDSText type="body">{feature}</XDSText>
              </XDSStack>
            ))}
          </XDSStack>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="wash" padding={5}>
        <XDSStack direction="vertical" gap={2} hAlign="center">
          <XDSStack direction="horizontal" gap={1} vAlign="end">
            <XDSHeading level={3}>$49</XDSHeading>
            <XDSText type="supporting" color="secondary">
              /month
            </XDSText>
          </XDSStack>
          <XDSButton label="Upgrade" variant="primary" />
        </XDSStack>
      </XDSSection>
    </XDSStack>
  );
}

Section — With DividersAdjacent sections separated by bottom dividers, like a settings page. Use dividers when stacking same-variant sections that need visual separation without a background change.

tsx
'use client';
import {XDSSection} from '@xds/core/Section';
import {XDSStack} from '@xds/core/Layout';
import {XDSHeading, XDSText} from '@xds/core/Text';
export default function SectionWithDividers() {
  return (
    <XDSStack direction="vertical" gap={0}>
      <XDSSection variant="section" padding={5} dividers={['bottom']}>
        <XDSStack direction="vertical" gap={1}>
          <XDSHeading level={4}>Account</XDSHeading>
          <XDSText type="body" color="secondary">
            Manage your profile, email, and password.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="section" padding={5} dividers={['bottom']}>
        <XDSStack direction="vertical" gap={1}>
          <XDSHeading level={4}>Notifications</XDSHeading>
          <XDSText type="body" color="secondary">
            Choose what updates you receive and how.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="section" padding={5}>
        <XDSStack direction="vertical" gap={1}>
          <XDSHeading level={4}>Privacy</XDSHeading>
          <XDSText type="body" color="secondary">
            Control who can see your activity and data.
          </XDSText>
        </XDSStack>
      </XDSSection>
    </XDSStack>
  );
}

Showcase source

tsx
'use client';
import {XDSSection} from '@xds/core/Section';
import {XDSStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
import * as stylex from '@stylexjs/stylex';
import {colorVars} from '@xds/core/theme/tokens.stylex';
const styles = stylex.create({
  transparentWrapper: {
    backgroundColor: colorVars['--color-background-blue'],
  },
});
export default function SectionVariants() {
  return (
    <XDSStack direction="vertical" gap={0}>
      <XDSSection variant="section" padding={5}>
        <XDSStack direction="vertical" gap={1}>
          <XDSText type="body" weight="bold">
            Section
          </XDSText>
          <XDSText type="supporting" color="secondary">
            White background.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="wash" padding={5}>
        <XDSStack direction="vertical" gap={1}>
          <XDSText type="body" weight="bold">
            Wash
          </XDSText>
          <XDSText type="supporting" color="secondary">
            Gray background.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSStack direction="vertical" xstyle={styles.transparentWrapper}>
        <XDSSection variant="transparent" padding={5}>
          <XDSStack direction="vertical" gap={1}>
            <XDSText type="body" weight="bold">
              Transparent
            </XDSText>
            <XDSText type="supporting" color="secondary">
              No background, shows the color behind it.
            </XDSText>
          </XDSStack>
        </XDSSection>
      </XDSStack>
    </XDSStack>
  );
}

Usage

import {XDSSection} from '@xds/core/Section'

Best practices

Guidance	Practices
Do	Start with the default variant. Use wash only to call attention to a specific region.
Do	Add dividers between same-background sections that need separation.

tsx

'use client'; import {XDSSection} from '@xds/core/Section'; import {XDSStack} from '@xds/core/Layout'; import {XDSHeading, XDSText} from '@xds/core/Text'; import {XDSButton} from '@xds/core/Button'; import {XDSIcon} from '@xds/core/Icon'; import {CheckIcon} from '@heroicons/react/24/solid'; const FEATURES = [ '10 team members', 'Unlimited projects', 'Priority support', 'Advanced analytics', ]; export default function SectionDefaultWithWash() { return ( <XDSStack direction="vertical" gap={0}> <XDSSection variant="section" padding={5}> <XDSStack direction="vertical" gap={3} hAlign="center"> <XDSStack direction="vertical" gap={1} hAlign="center"> <XDSText type="display-3">Pro Plan</XDSText> <XDSText type="body" color="secondary"> Everything you need to scale your team. </XDSText> </XDSStack> <XDSStack direction="vertical" gap={2}> {FEATURES.map(feature => ( <XDSStack key={feature} direction="horizontal" gap={2} vAlign="center"> <XDSIcon icon={CheckIcon} size="sm" /> <XDSText type="body">{feature}</XDSText> </XDSStack> ))} </XDSStack> </XDSStack> </XDSSection> <XDSSection variant="wash" padding={5}> <XDSStack direction="vertical" gap={2} hAlign="center"> <XDSStack direction="horizontal" gap={1} vAlign="end"> <XDSHeading level={3}>$49</XDSHeading> <XDSText type="supporting" color="secondary"> /month </XDSText> </XDSStack> <XDSButton label="Upgrade" variant="primary" /> </XDSStack> </XDSSection> </XDSStack> ); }

tsx

'use client'; import {XDSSection} from '@xds/core/Section'; import {XDSStack} from '@xds/core/Layout'; import {XDSHeading, XDSText} from '@xds/core/Text'; export default function SectionWithDividers() { return ( <XDSStack direction="vertical" gap={0}> <XDSSection variant="section" padding={5} dividers={['bottom']}> <XDSStack direction="vertical" gap={1}> <XDSHeading level={4}>Account</XDSHeading> <XDSText type="body" color="secondary"> Manage your profile, email, and password. </XDSText> </XDSStack> </XDSSection> <XDSSection variant="section" padding={5} dividers={['bottom']}> <XDSStack direction="vertical" gap={1}> <XDSHeading level={4}>Notifications</XDSHeading> <XDSText type="body" color="secondary"> Choose what updates you receive and how. </XDSText> </XDSStack> </XDSSection> <XDSSection variant="section" padding={5}> <XDSStack direction="vertical" gap={1}> <XDSHeading level={4}>Privacy</XDSHeading> <XDSText type="body" color="secondary"> Control who can see your activity and data. </XDSText> </XDSStack> </XDSSection> </XDSStack> ); }

tsx

'use client'; import {XDSSection} from '@xds/core/Section'; import {XDSStack} from '@xds/core/Layout'; import {XDSText} from '@xds/core/Text'; import * as stylex from '@stylexjs/stylex'; import {colorVars} from '@xds/core/theme/tokens.stylex'; const styles = stylex.create({ transparentWrapper: { backgroundColor: colorVars['--color-background-blue'], }, }); export default function SectionVariants() { return ( <XDSStack direction="vertical" gap={0}> <XDSSection variant="section" padding={5}> <XDSStack direction="vertical" gap={1}> <XDSText type="body" weight="bold"> Section </XDSText> <XDSText type="supporting" color="secondary"> White background. </XDSText> </XDSStack> </XDSSection> <XDSSection variant="wash" padding={5}> <XDSStack direction="vertical" gap={1}> <XDSText type="body" weight="bold"> Wash </XDSText> <XDSText type="supporting" color="secondary"> Gray background. </XDSText> </XDSStack> </XDSSection> <XDSStack direction="vertical" xstyle={styles.transparentWrapper}> <XDSSection variant="transparent" padding={5}> <XDSStack direction="vertical" gap={1}> <XDSText type="body" weight="bold"> Transparent </XDSText> <XDSText type="supporting" color="secondary"> No background, shows the color behind it. </XDSText> </XDSStack> </XDSSection> </XDSStack> </XDSStack> ); }