# Defaults: ImageWithTextSection to LogoListSection (/themes/sdk/reference/sections/defaults-8)

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

## `ImageWithTextSection` [#imagewithtextsection]

The platform's Image with text section: image beside copy and a call to action.

```ts
ImageWithTextSection(props: ElementRenderProps<PlatformSectionSettings<'image-with-text'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

export function ImageWithTextSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'image-with-text'>>): ReactElement {
  const imageFirst = (settings.image_position ?? 'left') === 'left';
  return (
    <section className='border-t border-border/60 py-10 sm:py-16'>
      <div className='theme-container grid items-center gap-8 lg:grid-cols-2 lg:gap-12'>
        <Slot
          name='media'
          className={cn(
            'flex flex-col gap-4 [&_img]:rounded-xl [&_img]:border [&_img]:border-border',
            !imageFirst && 'lg:order-2',
          )}
        />
        <Slot name='content' className={cn('flex flex-col gap-4', !imageFirst && 'lg:order-1')} />
      </div>
    </section>
  );
}
```

</Tab>


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

## `LogoListSection` [#logolistsection]

The platform's Logo list section: partner or payment logos.

```ts
LogoListSection(props: ElementRenderProps<PlatformSectionSettings<'logo-list'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/logo-list-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';
import { cn } from '@poltura/theme-sdk/ui';

export function LogoListSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'logo-list'>>): ReactElement | null {
  const editing = useIsEditing();
  const logos = useChildBlocks();
  if (!editing && logos.length === 0) return null;
  const heading = settings.heading ?? '';
  return (
    <section className='border-t border-border/60 py-8 sm:py-12'>
      <div className='theme-container'>
        {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}
        <Slot
          className={cn(
            'flex flex-wrap items-center justify-center gap-8 sm:gap-12',
            (settings.grayscale ?? true) &&
              '[&_img]:opacity-70 [&_img]:grayscale [&_img]:transition [&_img:hover]:opacity-100 [&_img:hover]:grayscale-0',
          )}
        />
      </div>
    </section>
  );
}
```

</Tab>


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