# Defaults: FeaturedRailSection (/themes/sdk/reference/sections/defaults-5)

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

## `FeaturedRailSection` [#featuredrailsection]

The platform's Featured products section: product rail from the live catalog.

```ts
FeaturedRailSection(props: ElementRenderProps<PlatformSectionSettings<'featured-rail'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/featured-rail-section.tsx"
import { useRef, type ReactElement } from 'react';
import { useProducts } from '@poltura/theme-sdk/data';
import {
  Slot,
  type ElementRenderProps,
  type PlatformSectionSettings,
} from '@poltura/theme-sdk/elements';
import { ProductRail, type ProductCard } from '@poltura/theme-sdk/listing';
import { MediaImage } from '@poltura/theme-sdk/media';
import { Link } from '@poltura/theme-sdk/routing';

const CARD_GAP_PX = 16;

function perViewOf(value: number): number {
  if (!Number.isFinite(value)) return 5;
  return Math.min(6, Math.max(3, Math.round(value)));
}

function RailCarousel({
  cards,
  perView,
}: {
  cards: readonly ProductCard[];
  perView: number;
}): ReactElement {
  const trackRef = useRef<HTMLDivElement>(null);
  const fits = cards.length <= perView;

  function scrollByCard(direction: number): void {
    const track = trackRef.current;
    if (track === null) return;
    const card = track.querySelector<HTMLElement>('[data-rail-card]');
    const width = card?.getBoundingClientRect().width ?? track.clientWidth / perView;
    track.scrollBy({ left: direction * (width + CARD_GAP_PX), behavior: 'smooth' });
  }

  return (
    <div className='relative'>
      {fits ? null : (
        <button
          type='button'
          aria-label='Previous'
          className='absolute left-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm'
          onClick={() => scrollByCard(-1)}
        >
          <span aria-hidden='true'>‹</span>
        </button>
      )}
      <div ref={trackRef} className='flex gap-4 overflow-x-auto snap-x snap-mandatory'>
        {cards.map((card) => (
          <div
            key={card.id}
            data-rail-card=''
            className='snap-start'
            style={{ width: `calc(100%/${String(perView)} - 1rem)`, flexShrink: 0 }}
          >
            <Link href={card.handle === '' ? '/products' : `/products/${card.handle}`} className='block'>
              {card.image === null ? null : (
                <MediaImage
                  image={card.image.url}
                  alt={card.image.alt ?? card.title}
                  field='Image'
                  className='w-full rounded-xl object-cover'
                />
              )}
              {card.title === '' ? null : (
                <p className='mt-3 text-sm font-semibold text-foreground'>{card.title}</p>
              )}
            </Link>
          </div>
        ))}
      </div>
      {fits ? null : (
        <button
          type='button'
          aria-label='Next'
          className='absolute right-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm'
          onClick={() => scrollByCard(1)}
        >
          <span aria-hidden='true'>›</span>
        </button>
      )}
    </div>
  );
}

export function FeaturedRailSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'featured-rail'>>): ReactElement {
  const { data } = useProducts(
    { limit: Math.max(1, settings.limit ?? 8), sort: 'popularity' },
    { suspense: true },
  );
  const cards = data.items;
  const title = settings.title ?? '';
  const subtitle = settings.subtitle ?? '';
  const overline = settings.overline ?? '';
  const layout = settings.layout === 'carousel' ? 'carousel' : 'grid';
  const perView = perViewOf(settings.per_view ?? 5);
  if (cards.length === 0) {
    return (
      <section className='border-t border-border/60 py-16' data-rail-layout={layout}>
        <Slot className='theme-container flex flex-col gap-4' />
      </section>
    );
  }
  if (layout === 'carousel') {
    const viewAllLabel = settings.view_all_label ?? '';
    return (
      <section
        className='border-t border-border/60 bg-background py-16'
        data-rail-layout='carousel'
        data-per-view={String(perView)}
      >
        <div className='theme-container'>
          <div className='mb-6 flex items-end justify-between gap-4'>
            <div>
              {overline ? (
                <p className='text-xs font-medium uppercase tracking-wider text-muted-foreground'>
                  {overline}
                </p>
              ) : null}
              <h2 className='text-2xl font-bold tracking-tight text-foreground'>{title}</h2>
              {subtitle ? <p className='mt-1 text-sm text-muted-foreground'>{subtitle}</p> : null}
            </div>
            {viewAllLabel === '' ? null : (
              <Link
                href={settings.view_all_href ?? '/products'}
                className='text-sm font-semibold text-primary underline-offset-4 hover:underline'
              >
                {viewAllLabel}
              </Link>
            )}
          </div>
          <RailCarousel cards={cards} perView={perView} />
          <Slot className='mt-6 flex flex-col gap-4' />
        </div>
      </section>
    );
  }
  return (
    <section className='border-t border-border/60 bg-background py-16' data-rail-layout='grid'>
      <ProductRail
        cards={cards}
        title={title}
        subtitle={subtitle}
        viewAllHref='/products'
        className='py-0'
      />
      <Slot className='theme-container mt-6 flex flex-col gap-4' />
    </section>
  );
}
```

</Tab>


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