# Defaults: CustomSection to FaqSection (/themes/sdk/reference/sections/defaults-4)

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

## `CustomSection` [#customsection]

The platform's Custom section section: a blank canvas: build any layout from elements.

```ts
CustomSection(props: ElementRenderProps<PlatformSectionSettings<'custom-section'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/custom-section.tsx"
import type { ReactElement } from 'react';
import { SectionDropArea, useIsEditing } from '@poltura/theme-sdk/editor';
import {
  ElementBackground,
  ElementDividers,
  Slot,
  useChildBlocks,
  useHasElementBackground,
  type ElementRenderProps,
  type PlatformSectionSettings,
} from '@poltura/theme-sdk/elements';
import { cn } from '@poltura/theme-sdk/ui';

/**
 * Padding instead of a max-width wrapper keeps the elements direct children of the section, so
 * the merchant's layout style applies to them; `--pe-gutter` carries the side padding the Style
 * tab adds to, and `boxed` reproduces `.theme-container` at every width.
 */
const WIDTHS = {
  boxed: '[--pe-gutter:calc(max(0px,(100%_-_var(--pt-maxw-content))_/_2)_+_var(--pt-gutter))]',
  wide: '[--pe-gutter:calc(max(0px,(100%_-_var(--pt-maxw-wide))_/_2)_+_var(--pt-gutter))]',
  full: '[--pe-gutter:var(--pt-gutter)]',
} as const;

/** The Custom section: its elements are direct children of the root, so its own style lays them out. */
export function CustomSection({
  settings,
  attrs,
}: ElementRenderProps<PlatformSectionSettings<'custom-section'>>): ReactElement | null {
  const editing = useIsEditing();
  const hasBackground = useHasElementBackground();
  const elements = useChildBlocks();
  if (elements.length === 0 && !hasBackground && !editing) return null;
  return (
    <section
      {...attrs}
      className={cn(
        attrs.className,
        'relative isolate flex scroll-mt-4 flex-col gap-6 px-[var(--pe-gutter)] py-12 sm:py-16',
        WIDTHS[settings.width ?? 'boxed'],
      )}
    >
      <ElementBackground />
      <ElementDividers />
      {elements.length > 0 ? <Slot as='none' /> : <SectionDropArea />}
    </section>
  );
}
```

</Tab>


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

## `FaqSection` [#faqsection]

The platform's FAQ section: expandable question and answer list.

```ts
FaqSection(props: ElementRenderProps<PlatformSectionSettings<'faq'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/faq-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 Heading({ heading, subheading }: { heading: string; subheading: string }) {
  if (!heading && !subheading) return null;
  return (
    <div className='mb-8 text-center'>
      {heading ? (
        <h2 className='text-2xl sm:text-3xl font-bold tracking-tight text-foreground break-words'>
          {heading}
        </h2>
      ) : null}
      {subheading ? (
        <p className='mt-2 text-sm sm:text-base text-muted-foreground'>{subheading}</p>
      ) : null}
    </div>
  );
}

export function FaqSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'faq'>>): ReactElement | null {
  const editing = useIsEditing();
  const questions = useChildBlocks();
  if (!editing && questions.length === 0) return null;
  return (
    <section className='border-t border-border/60 py-10 sm:py-16'>
      <div className='theme-container'>
        <div className='mx-auto max-w-3xl'>
          <Heading heading={settings.heading ?? ''} subheading={settings.subheading ?? ''} />
          <Slot className='divide-y divide-border rounded-xl border border-border' />
        </div>
      </div>
    </section>
  );
}
```

</Tab>


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