# Defaults: PageBodySection to PageHeroSection (/themes/sdk/reference/sections/defaults-9)

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

## `PageBodySection` [#pagebodysection]

The platform's Body section: main page copy.

```ts
PageBodySection(props: ElementRenderProps<PlatformSectionSettings<'page-body'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/page-body-section.tsx"
import type { ReactElement } from 'react';
import {
  EditableRichText,
  type ElementRenderProps,
  type PlatformSectionSettings,
} from '@poltura/theme-sdk/elements';
import { Markdown } from '@poltura/theme-sdk/content';
import { Link, useSitePage } from '@poltura/theme-sdk/routing';
import { useIsEditing } from '@poltura/theme-sdk/editor';

export function PageBodySection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'page-body'>>): ReactElement | null {
  const page = useSitePage();
  const editing = useIsEditing();
  if (!(settings.enabled_block ?? true)) return null;
  if (page) {
    if (!page.contentHtml) return null;
    return (
      <section className='py-10 sm:py-14'>
        <div className='theme-container'>
          <div className='mx-auto max-w-3xl'>
            <Markdown source={page.contentHtml} />
          </div>
        </div>
      </section>
    );
  }
  if (!editing) return null;
  const heading = settings.heading ?? '';
  const body = settings.body ?? '';
  const linkLabel = settings.link_label ?? '';
  if (!heading && !body && !linkLabel) return null;
  return (
    <section className='py-10 sm:py-14'>
      <div className='theme-container'>
        <div className='mx-auto max-w-3xl'>
          {heading ? (
            <h2 className='mb-4 text-2xl font-bold tracking-tight text-foreground'>{heading}</h2>
          ) : null}
          {body ? <EditableRichText setting='body' className='prose max-w-none' /> : null}
          {linkLabel ? (
            <Link
              href={settings.link_href ?? '/products'}
              className='mt-6 inline-flex text-sm font-semibold text-primary hover:underline'
            >
              {linkLabel}
            </Link>
          ) : null}
        </div>
      </div>
    </section>
  );
}
```

</Tab>


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

## `PageHeroSection` [#pageherosection]

The platform's Hero section: page hero: the page title and whatever you add under it.

```ts
PageHeroSection(props: ElementRenderProps<PlatformSectionSettings<'page-hero'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

export function PageHeroSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'page-hero'>>): ReactElement | null {
  const page = useSitePage();
  if (!(settings.enabled_block ?? true)) return null;
  return (
    <section className='theme-section-band border-b border-border bg-muted/30 py-12 sm:py-16'>
      <div className='theme-container'>
        <div className='theme-section-centered mx-auto max-w-3xl text-center'>
          {page?.parent ? (
            <p className='mb-3 text-sm text-muted-foreground'>
              <Link
                href={pageHref(page.parent)}
                className='font-medium text-primary underline underline-offset-4'
              >
                {page.parent.title}
              </Link>
            </p>
          ) : null}
          <Slot className='flex flex-col items-center gap-4' />
        </div>
      </div>
    </section>
  );
}
```

</Tab>


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