# Defaults: GallerySection to HeadingSection (/themes/sdk/reference/sections/defaults-6)

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

## `GallerySection` [#gallerysection]

The platform's Gallery section: image grid.

```ts
GallerySection(props: ElementRenderProps<PlatformSectionSettings<'gallery'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/gallery-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 {
  const columns = Math.round(count);
  if (columns <= 1) return 'grid-cols-1';
  if (columns === 2) return 'grid-cols-1 sm:grid-cols-2';
  if (columns >= 4) return 'grid-cols-2 lg:grid-cols-4';
  return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
}

export function GallerySection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'gallery'>>): ReactElement | null {
  const editing = useIsEditing();
  if (useChildBlocks().length === 0 && !editing) return null;
  const heading = settings.heading ?? '';
  return (
    <section className='border-t border-border/60 py-10 sm:py-16'>
      <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}
        <Slot className={`grid gap-4 ${columnsClass(settings.columns ?? 3)}`} />
      </div>
    </section>
  );
}
```

</Tab>


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

## `HeadingSection` [#headingsection]

The platform's Heading section: standalone section title and intro.

```ts
HeadingSection(props: ElementRenderProps<PlatformSectionSettings<'heading'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

type HeadingSettings = PlatformSectionSettings<'heading'>;

function paddingClass(size: HeadingSettings['size']): string {
  if (size === 'small') return 'py-6 sm:py-8';
  if (size === 'large') return 'py-16 sm:py-24';
  return 'py-10 sm:py-14';
}

function measureClass(align: HeadingSettings['align']): string {
  if (align === 'left') return 'max-w-3xl text-left';
  if (align === 'right') return 'ml-auto max-w-3xl text-right';
  return 'mx-auto max-w-3xl text-center';
}

export function HeadingSection({ settings }: ElementRenderProps<HeadingSettings>): ReactElement {
  return (
    <section className={paddingClass(settings.size)}>
      <div className='theme-container'>
        <div className={measureClass(settings.align)}>
          <h2 className='text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight text-foreground break-words'>
            {settings.heading ?? ''}
          </h2>
          {settings.body ? (
            <EditableRichText
              setting='body'
              className='mt-3 space-y-3 text-sm sm:text-base text-muted-foreground leading-relaxed'
            />
          ) : null}
        </div>
      </div>
    </section>
  );
}
```

</Tab>


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