# Defaults: BentoSection (/themes/sdk/reference/sections/defaults-2)

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

## `BentoSection` [#bentosection]

The platform's Bento hero section: a grid of pictures, products and link cards, with an optional top-sellers rail.

```ts
BentoSection(props: ElementRenderProps<PlatformSectionSettings<'bento'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/bento-section.tsx"
import type { ReactElement } from 'react';
import { useProducts } from '@poltura/theme-sdk/data';
import { useIsEditing } from '@poltura/theme-sdk/editor';
import {
  Slot,
  useChildBlocks,
  type ElementRenderProps,
  type PlatformSectionSettings,
} from '@poltura/theme-sdk/elements';
import { useThemeText } from '@poltura/theme-sdk/i18n';
import type { ProductCard } from '@poltura/theme-sdk/listing';
import { MediaImage } from '@poltura/theme-sdk/media';
import { CompareAtPrice, Price, UnitPrice } from '@poltura/theme-sdk/price';
import { Link } from '@poltura/theme-sdk/routing';
import { cn } from '@poltura/theme-sdk/ui';

const RAIL_MIN = 3;
const RAIL_MAX = 8;
const RAIL_VISIBLE = 5;

function railCount(value: number): number {
  return Math.min(RAIL_MAX, Math.max(RAIL_MIN, value));
}

function RailTile({
  cards,
  title,
  linkLabel,
  linkHref,
}: {
  cards: readonly ProductCard[];
  title: string;
  linkLabel: string;
  linkHref: string;
}): ReactElement {
  return (
    <article className='bento__tile bento__tile--rail'>
      <div className='bento__rail'>
        <header className='bento__rail-head'>
          {title ? <h3 className='bento__rail-title'>{title}</h3> : null}
          {linkLabel ? (
            <Link className='bento__rail-link' href={linkHref || '/products'}>
              {linkLabel}
            </Link>
          ) : null}
        </header>
        <ol className='bento__rail-list'>
          {cards.map((card, index) => (
            <li
              key={card.id}
              className={
                index >= RAIL_VISIBLE
                  ? 'bento__rail-item bento__rail-item--overflow'
                  : 'bento__rail-item'
              }
            >
              <Link className='bento__rail-link-row' href={card.href || '/products'}>
                <span className='bento__rank'>{index + 1}</span>
                <span className='bento__rail-thumb'>
                  {card.image ? <MediaImage image={card.image.url} alt='' /> : null}
                </span>
                <span className='bento__rail-body'>
                  <span className='bento__rail-name'>{card.title}</span>
                  {card.collection?.title ? (
                    <span className='bento__rail-meta'>{card.collection.title}</span>
                  ) : null}
                  <UnitPrice price={card.price} className='bento__rail-meta bento__unit-price' />
                </span>
                <span className='bento__rail-prices'>
                  <CompareAtPrice price={card.price} className='bento__price-was' />
                  <Price
                    price={card.price}
                    className='bento__price'
                    noteClassName='bento__price-note'
                  />
                </span>
              </Link>
            </li>
          ))}
        </ol>
      </div>
    </article>
  );
}

/**
 * The bento: a head, the merchant's elements (a Bento grid of pictures, products and link cards
 * by default) and the optional top-sellers rail beside them on wide screens.
 */
export function BentoSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'bento'>>): ReactElement | null {
  const editing = useIsEditing();
  const t = useThemeText('bento');
  const tiles = useChildBlocks();
  const showRail = settings.show_top_sellers ?? true;
  const { data } = useProducts(
    {
      limit: railCount(settings.top_sellers_count ?? 6),
      sort: settings.top_sellers_source === 'newest' ? 'newest' : 'popularity',
    },
    { suspense: true },
  );
  const rail = showRail ? data.items : [];
  const eyebrow = (settings.eyebrow ?? '').trim();
  const heading = (settings.heading ?? '').trim();
  const headLinkLabel = (settings.head_link_label ?? '').trim();
  const hasHead = eyebrow !== '' || heading !== '' || headLinkLabel !== '';
  const hasRail = rail.length > 0;
  if (!editing && tiles.length === 0 && !hasRail && !hasHead) return null;

  return (
    <section className='bento'>
      <div className='theme-container'>
        {hasHead ? (
          <header className='bento__head'>
            {eyebrow ? <p className='bento__head-eyebrow'>{eyebrow}</p> : null}
            {heading ? <h2 className='bento__head-title'>{heading}</h2> : null}
            {headLinkLabel ? (
              <Link className='bento__head-link' href={settings.head_link_href || '/products'}>
                {headLinkLabel}
              </Link>
            ) : null}
          </header>
        ) : null}
        <div
          className={cn(
            'bento__body grid gap-(--bento-gap) lg:gap-(--bento-gap-lg)',
            hasRail && tiles.length > 0 && 'xl:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]',
          )}
        >
          <Slot className='bento__tiles min-w-0' />
          {hasRail ? (
            <RailTile
              cards={rail}
              title={settings.top_sellers_title ?? t('topSellers.title')}
              linkLabel={settings.top_sellers_label ?? t('topSellers.viewAll')}
              linkHref={settings.top_sellers_href ?? '/products'}
            />
          ) : null}
        </div>
      </div>
    </section>
  );
}
```

</Tab>


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