# Defaults: HeroSection (/themes/sdk/reference/sections/defaults-7)

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

## `HeroSection` [#herosection]

The platform's Hero section: headline, copy and buttons over the page opening.

```ts
HeroSection(props: ElementRenderProps<PlatformSectionSettings<'hero'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

type HeroSettings = PlatformSectionSettings<'hero'>;

const ALIGN_CLASSES = {
  left: 'items-start text-left',
  center: 'items-center text-center',
  right: 'items-end text-right',
} as const;

const HERO_COLOR = /^#[0-9a-fA-F]{3,8}$|^var\(--[\w-]+\)$/;
const HERO_GRADIENT =
  /^linear-gradient\(\d{1,3}deg(?:, ?#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8}) \d{1,3}%){2,8}\)$/;

/** Merchant colours land in a style attribute, so only a hex, a token or a plain gradient passes. */
function colorVars(settings: HeroSettings) {
  const vars = new Map<string, string>();
  const { background_color: background, text_color: text, background_gradient: gradient } =
    settings;
  if (background && HERO_COLOR.test(background)) vars.set('--hero-bg', background);
  if (text && HERO_COLOR.test(text)) vars.set('--hero-fg', text);
  if (gradient && HERO_GRADIENT.test(gradient)) vars.set('--hero-bg-image', gradient);
  return vars;
}

export function HeroSection({ settings }: ElementRenderProps<HeroSettings>): ReactElement {
  const align = ALIGN_CLASSES[settings.align ?? 'center'];
  const lead = useIsPageLead();
  const vars = colorVars(settings);
  const colored = vars.size > 0;
  return (
    <section
      className={`relative overflow-hidden border-b border-border${colored ? ' theme-hero-colored' : ''}`}
      // SAFETY: every value passed the colour or gradient test; these are custom properties only.
      style={colored ? (Object.fromEntries(vars) as CSSProperties) : undefined}
      data-header-underlay=''
    >
      <MediaImage
        image={settings.background_image ?? ''}
        role='hero'
        decorative
        priority={lead}
        className='pointer-events-none absolute inset-0 h-full w-full object-cover opacity-30'
        fallback={
          <div
            className='pointer-events-none absolute inset-0 opacity-80'
            aria-hidden
            style={{
              background:
                'radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 70%)',
            }}
          />
        }
      />
      <SettingVideo
        value={settings.background_video}
        cover
        className='pointer-events-none opacity-30'
      />
      <div
        className={`theme-container relative flex flex-col gap-6 pb-16 pt-[calc(4rem+var(--pt-header-underlay,0px))] md:pb-24 md:pt-[calc(6rem+var(--pt-header-underlay,0px))] ${align}`}
      >
        <Slot className={`flex w-full max-w-3xl flex-col gap-6 ${align}`} />
        <Slot name='actions' className='flex flex-wrap items-center gap-3' />
      </div>
    </section>
  );
}
```

</Tab>


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