# Defaults: BannerSection (/themes/sdk/reference/sections/defaults-1)

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

## `BannerSection` [#bannersection]

The platform's Banner section: full-width announcement or promo strip.

```ts
BannerSection(props: ElementRenderProps<PlatformSectionSettings<'banner'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

type BannerSettings = PlatformSectionSettings<'banner'>;

function bandClass(style: BannerSettings['style']): string {
  if (style === 'primary') return 'bg-primary text-primary-foreground';
  if (style === 'accent') return 'bg-primary/10 text-foreground';
  return 'bg-muted/60 text-muted-foreground';
}

export function BannerSection({ settings }: ElementRenderProps<BannerSettings>): ReactElement {
  const href = settings.href ?? '/products';
  return (
    <div className={`border-b border-border ${bandClass(settings.style)}`}>
      <div className='theme-section-centered container mx-auto flex flex-wrap items-center justify-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 text-center text-xs sm:text-sm'>
        <span className='font-medium break-words'>{settings.text ?? ''}</span>
        {href ? (
          <Link href={href} className='underline underline-offset-4 font-semibold shrink-0'>
            {settings.link_label ?? ''}
          </Link>
        ) : null}
        <Slot className='flex flex-wrap items-center justify-center gap-2' />
      </div>
    </div>
  );
}
```

</Tab>


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