# Defaults: TestimonialsSection to TrustRowSection (/themes/sdk/reference/sections/defaults-13)

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

## `TestimonialsSection` [#testimonialssection]

The platform's Testimonials section: customer quotes.

```ts
TestimonialsSection(props: ElementRenderProps<PlatformSectionSettings<'testimonials'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/testimonials-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';

function columnsClass(count: number): string {
  const columns = Math.round(count);
  if (columns <= 1) return 'grid-cols-1';
  if (columns === 2) return 'grid-cols-1 sm:grid-cols-2';
  if (columns >= 4) return 'grid-cols-2 lg:grid-cols-4';
  return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
}

function Heading({ heading, subheading }: { heading: string; subheading: string }) {
  if (!heading && !subheading) return null;
  return (
    <div className='mb-8 text-center'>
      {heading ? (
        <h2 className='text-2xl sm:text-3xl font-bold tracking-tight text-foreground break-words'>
          {heading}
        </h2>
      ) : null}
      {subheading ? (
        <p className='mt-2 text-sm sm:text-base text-muted-foreground'>{subheading}</p>
      ) : null}
    </div>
  );
}

export function TestimonialsSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'testimonials'>>): ReactElement | null {
  const editing = useIsEditing();
  const quotes = useChildBlocks();
  if (!editing && quotes.length === 0) return null;
  return (
    <section className='theme-section-band border-t border-border/60 bg-muted/30 py-10 sm:py-16'>
      <div className='theme-container'>
        <Heading heading={settings.heading ?? ''} subheading={settings.subheading ?? ''} />
        <Slot className={`grid gap-5 ${columnsClass(settings.columns ?? 3)}`} />
      </div>
    </section>
  );
}
```

</Tab>


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

## `TrustRowSection` [#trustrowsection]

The platform's Trust row section: three short trust points.

```ts
TrustRowSection(props: ElementRenderProps<PlatformSectionSettings<'trust-row'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

export function TrustRowSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'trust-row'>>): ReactElement {
  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='theme-section-band border-t border-border/60 bg-muted/30 py-8 sm:py-10'>
      <div className='container mx-auto grid gap-5 sm:gap-6 px-3 sm:px-4 grid-cols-1 sm:grid-cols-3'>
        {items.map((item, index) => (
          <div key={index} className='text-center sm:text-left'>
            <h3 className='text-sm font-semibold text-foreground'>{item.title}</h3>
            <p className='mt-1 text-sm text-muted-foreground'>{item.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
```

</Tab>


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