# Defaults: SpacerSection to StatsSection (/themes/sdk/reference/sections/defaults-11)

```ts
import { … } from '@poltura/theme-sdk/sections';
```

## `SpacerSection` [#spacersection]

The platform's Spacer section: vertical space, optionally with a divider.

```ts
SpacerSection(props: ElementRenderProps<PlatformSectionSettings<'spacer'>>): ReactNode
```

**Props:** [`ElementRenderProps`](/themes/sdk/reference/elements/types-2#elementrenderprops)

<Tab value='Example'>

```tsx
import { overrideSection } from '@poltura/theme-sdk/elements';
import { SpacerSection } from '@poltura/theme-sdk/sections';

export const framed = overrideSection('spacer', (props) => (
  <div className="theme-frame">
    <SpacerSection {...props} />
  </div>
));
```

</Tab>
<Tab value='Source'>

```tsx title="source/spacer-section.tsx"
import type { ReactElement } from 'react';
import type { ElementRenderProps, PlatformSectionSettings } from '@poltura/theme-sdk/elements';

type SpacerSettings = PlatformSectionSettings<'spacer'>;

function heightClass(size: SpacerSettings['size']): string {
  if (size === 'small') return 'h-6 sm:h-8';
  if (size === 'large') return 'h-20 sm:h-28';
  return 'h-12 sm:h-16';
}

export function SpacerSection({ settings }: ElementRenderProps<SpacerSettings>): ReactElement {
  const divider = settings.divider ?? false;
  return (
    <div className={`${heightClass(settings.size)} ${divider ? 'flex items-center' : ''}`}>
      {divider ? (
        <div className='theme-container'>
          <hr className='border-border' />
        </div>
      ) : null}
    </div>
  );
}
```

</Tab>


**See also:** [`overrideSection`](/themes/sdk/reference/elements/functions#overridesection)

## `StatsSection` [#statssection]

The platform's Stats section: numbers that build trust.

```ts
StatsSection(props: ElementRenderProps<PlatformSectionSettings<'stats'>>): ReactNode
```

**Props:** [`ElementRenderProps`](/themes/sdk/reference/elements/types-2#elementrenderprops)

<Tab value='Example'>

```tsx
import { overrideSection } from '@poltura/theme-sdk/elements';
import { StatsSection } from '@poltura/theme-sdk/sections';

export const framed = overrideSection('stats', (props) => (
  <div className="theme-frame">
    <StatsSection {...props} />
  </div>
));
```

</Tab>
<Tab value='Source'>

```tsx title="source/stats-section.tsx"
import type { ReactElement } from 'react';
import {
  Slot,
  useChildBlocks,
  type ElementRenderProps,
  type PlatformSectionSettings,
} from '@poltura/theme-sdk/elements';
import { useIsEditing } from '@poltura/theme-sdk/editor';

function columnsClass(count: number): string {
  if (count <= 1) return 'grid-cols-1';
  if (count === 2) return 'grid-cols-1 sm:grid-cols-2';
  if (count === 3) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
  return 'grid-cols-2 lg:grid-cols-4';
}

/** Each stat draws a `<dt>` and a `<dd>`, so the slot draws them straight into the `<dl>`. */
export function StatsSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'stats'>>): ReactElement | null {
  const editing = useIsEditing();
  const stats = useChildBlocks();
  if (!editing && stats.length === 0) return null;
  const heading = settings.heading ?? '';
  return (
    <section className='border-t border-border/60 py-10 sm:py-14'>
      <div className='theme-container'>
        {heading ? (
          <div className='mb-8 text-center'>
            <h2 className='text-2xl sm:text-3xl font-bold tracking-tight text-foreground break-words'>
              {heading}
            </h2>
          </div>
        ) : null}
        <dl
          className={`theme-section-centered grid gap-6 text-center ${columnsClass(stats.length)}`}
        >
          <Slot as='none' />
        </dl>
      </div>
    </section>
  );
}
```

</Tab>


**See also:** [`overrideSection`](/themes/sdk/reference/elements/functions#overridesection)