# Types: ProductGridProps to ListingEmptyProps (/themes/sdk/reference/listing/types-3)

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

## `ProductGridProps` [#productgridprops]

Props of [`ProductGrid`](/themes/sdk/reference/listing/defaults-2#productgrid).

<TypeTable type={{"cards":{"description":"The cards to show, in order.","type":"readonly ProductCardView[]","required":true},"layout":{"description":"Grid tiles or list rows; defaults to `grid`.","type":"ProductCardLayout","required":false},"columns":{"description":"Cards per row on wide and narrow screens; defaults to four and two.","type":"{ readonly desktop: number; readonly mobile: number; }","required":false},"show":{"description":"Card parts to switch off.","type":"Partial<ProductCardVisibility>","required":false},"imageAspectRatio":{"description":"The card image's CSS aspect ratio.","type":"string","required":false},"labels":{"description":"The cards' button texts.","type":"ProductCardLabels","required":false},"empty":{"description":"The heading and text shown when there are no cards.","type":"{ readonly heading?: string; readonly body?: string; }","required":false},"loading":{"description":"Shows a page of placeholders instead of the cards.","type":"boolean","required":false},"className":{"description":"Classes added to the grid.","type":"string","required":false},"listName":{"description":"The list's name in the store's analytics, such as a rail's heading; unset keeps the enclosing list's.","type":"string","required":false}}} />

## `ProductListProps` [#productlistprops]

Props of [`ProductList`](/themes/sdk/reference/listing/parts-2#productlist).

<TypeTable type={{"cards":{"description":"The cards inside, in the order they show.","type":"readonly ProductCardView[]","required":true},"children":{"description":"The cards in your own layout.","type":"ReactNode","required":false},"name":{"description":"The list's name in the store's analytics, such as a rail's heading; unset keeps the enclosing list's, or the search results.","type":"string","required":false}}} />

## `ProductRailClassKey` [#productrailclasskey]

The parts of [`ProductRail`](/themes/sdk/reference/listing/defaults-3#productrail) its `classes` prop styles.

```ts
type ProductRailClassKey = 'header' | 'grid'
```

## `ProductRailProps` [#productrailprops]

Props of [`ProductRail`](/themes/sdk/reference/listing/defaults-3#productrail).

<TypeTable type={{"cards":{"description":"The cards to show, in order.","type":"readonly ProductCardView[]","required":true},"title":{"description":"The rail's heading.","type":"string","required":false},"subtitle":{"description":"A line under the heading.","type":"string","required":false},"viewAllHref":{"description":"Where \"view all\" leads; defaults to the catalogue.","type":"string","required":false},"layout":{"description":"A grid, or one scrolling row; defaults to `grid`.","type":"'grid' | 'carousel'","required":false},"perView":{"description":"Cards visible at once in a scrolling row, 3 to 6; defaults to 5.","type":"number","required":false},"mobileArrows":{"description":"Shows the row's arrows on narrow screens too when it holds more than two cards.","type":"boolean","required":false},"arrowPlacement":{"description":"Arrows over the row's sides, or together above its right end; defaults to `edges`.","type":"'edges' | 'topRight'","required":false},"mobileViewAll":{"description":"Shows a full-width \"view all\" button under the cards on narrow screens; defaults to true.","type":"boolean","required":false},"className":{"description":"Classes added to the section.","type":"string","required":false},"classes":{"description":"Classes added to the heading row and the grid.","type":"Partial<Record<ProductRailClassKey, string>>","required":false},"icon":{"description":"Drawn before the heading; a star when unset.","type":"ReactNode","required":false}}} />

## `ListingHeaderProps` [#listingheaderprops]

Props of [`ListingHeader`](/themes/sdk/reference/listing/parts-2#listingheader).

<TypeTable type={{"header":{"description":"The heading, as {@link useListing} hands it.","type":"ListingState['header']","required":true},"sort":{"description":"A control shown beside the heading on wide screens, such as {@link SortSelect}.","type":"ReactNode","required":false},"onClearSearch":{"description":"Called by the \"clear search\" button of a results page; without it the button is not shown.","type":"() => void","required":false},"clearSearchLabel":{"description":"The \"clear search\" button's text; defaults to the store's wording.","type":"string","required":false},"busy":{"description":"Disables the button while the list reloads.","type":"boolean","required":false},"className":{"description":"Classes added to the heading row.","type":"string","required":false}}} />

## `ListingEmptyProps` [#listingemptyprops]

Props of [`ListingEmpty`](/themes/sdk/reference/listing/parts-2#listingempty).

<TypeTable type={{"heading":{"description":"The heading; defaults to the store's \"no products\" wording.","type":"string","required":false},"body":{"description":"The text under it.","type":"string","required":false},"className":{"description":"Classes added to the block.","type":"string","required":false}}} />