# Defaults: TrustSection to VideoSection (/themes/sdk/reference/sections/defaults-14)

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

## `TrustSection` [#trustsection]

The platform's Trust strip section: three trust points under a heading.

```ts
TrustSection(props: ElementRenderProps<PlatformSectionSettings<'trust'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

export function TrustSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'trust'>>): ReactElement {
  const title = settings.title ?? '';
  const items = [
    { title: settings.item1_title ?? '', body: settings.item1_body ?? '' },
    { title: settings.item2_title ?? '', body: settings.item2_body ?? '' },
    { title: settings.item3_title ?? '', body: settings.item3_body ?? '' },
  ];
  return (
    <section className='border-t border-border/60 py-14'>
      <div className='theme-container'>
        {title ? (
          <h2 className='theme-section-centered mb-8 text-center text-2xl font-semibold tracking-tight text-foreground'>
            {title}
          </h2>
        ) : null}
        <div className='theme-trust-grid'>
          {items.map((item) => (
            <div key={item.title} className='theme-trust-card'>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </div>
          ))}
        </div>
        <Slot className='mt-8 flex flex-col gap-4' />
      </div>
    </section>
  );
}
```

</Tab>


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

## `VideoSection` [#videosection]

The platform's Video section: embedded YouTube or Vimeo player.

```ts
VideoSection(props: ElementRenderProps<PlatformSectionSettings<'video'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

type VideoSettings = PlatformSectionSettings<'video'>;

function aspectClass(aspect: VideoSettings['aspect']): string {
  if (aspect === '4x3') return 'aspect-4/3';
  if (aspect === '1x1') return 'aspect-square';
  return 'aspect-video';
}

export function VideoSection({ settings }: ElementRenderProps<VideoSettings>): ReactElement | null {
  const video = useVideoSetting(settings.url ?? '');
  if (video?.kind !== 'embed') return null;
  const heading = settings.heading ?? '';
  return (
    <section className='border-t border-border/60 py-10 sm:py-16'>
      <div className='theme-container'>
        <div className='mx-auto max-w-4xl'>
          {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}
          <div
            className={`overflow-hidden rounded-xl border border-border ${aspectClass(settings.aspect)}`}
          >
            <iframe
              src={video.src}
              title={video.title ?? ''}
              className='h-full w-full'
              loading='lazy'
              referrerPolicy='strict-origin-when-cross-origin'
              // oxlint-disable-next-line react/iframe-missing-sandbox -- the player is always YouTube or Vimeo, so the frame stays cross-origin and allow-same-origin cannot lift the sandbox; the players need both
              sandbox='allow-scripts allow-same-origin allow-presentation allow-popups'
              allow='accelerometer; clipboard-write; encrypted-media; picture-in-picture'
              allowFullScreen
            />
          </div>
        </div>
      </div>
    </section>
  );
}
```

</Tab>


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