# Parts: ProductCardBadge to ListingEmpty (/themes/sdk/reference/listing/parts-2)

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

## `ProductCardBadge` [#productcardbadge]

The merchant's card badge, the first specification the store shows on cards; nothing without one.

```ts
ProductCardBadge(props: ProductCardBadgeProps): ReactElement | null
```

**Props:** [`ProductCardBadgeProps`](/themes/sdk/reference/listing/types-2#productcardbadgeprops)

**Example**

```tsx
import { ProductCardBadge, type ProductCard } from '@poltura/theme-sdk/listing';

export function CardFooter({ card }: { card: ProductCard }) {
  return <ProductCardBadge card={card} className="mt-2" />;
}
```

## `ProductCardSpecs` [#productcardspecs]

The attribute values the store shows on cards, such as a game's platform, as small chips with their icons and "+N" for the rest; nothing without any.

```ts
ProductCardSpecs(props: ProductCardSpecsProps): ReactElement | null
```

**Props:** [`ProductCardSpecsProps`](/themes/sdk/reference/listing/types-2#productcardspecsprops)

**Example**

```tsx
import { ProductCardSpecs, type ProductCard } from '@poltura/theme-sdk/listing';

export function CardPlatforms({ card }: { card: ProductCard }) {
  return <ProductCardSpecs card={card} max={3} className="mt-2" />;
}
```

**See also:** [`ProductCardBadge`](/themes/sdk/reference/listing/parts-2#productcardbadge)

## `ProductList` [#productlist]

Reports the cards inside as one product list to the store's analytics: the list once it shows, and the card a shopper opens.

```ts
ProductList(props: ProductListProps): ReactElement
```

**Props:** [`ProductListProps`](/themes/sdk/reference/listing/types-3#productlistprops)

**Example**

```tsx
import { useProducts } from '@poltura/theme-sdk/data';
import { ProductCard, ProductList } from '@poltura/theme-sdk/listing';

export function NewArrivals() {
  const { data } = useProducts({ sort: 'newest', limit: 4 }, { suspense: true });
  return (
    <ProductList cards={data.items}>
      <div className='grid grid-cols-2 gap-4'>
        {data.items.map((card) => (
          <ProductCard key={card.id} card={card} />
        ))}
      </div>
    </ProductList>
  );
}
```

## `ListingHeader` [#listingheader]

A listing's title, product count and description, with a "clear search" button on a results page.

```ts
ListingHeader(props: ListingHeaderProps): ReactElement
```

**Props:** [`ListingHeaderProps`](/themes/sdk/reference/listing/types-3#listingheaderprops)

**Example**

```tsx
import { ListingHeader, SortSelect, useListing } from '@poltura/theme-sdk/listing';

export function Heading() {
  const { header, sort } = useListing();
  return <ListingHeader header={header} sort={<SortSelect options={sort.options} selected={sort.selected} onChange={sort.set} />} />;
}
```

## `ListingEmpty` [#listingempty]

The block a listing shows when nothing matches: an icon, a heading and a line of text.

```ts
ListingEmpty(props: ListingEmptyProps): ReactElement
```

**Props:** [`ListingEmptyProps`](/themes/sdk/reference/listing/types-3#listingemptyprops)

**Example**

```tsx
import { ListingEmpty } from '@poltura/theme-sdk/listing';

export function NoResults() {
  return <ListingEmpty heading="Nothing here yet" body="Try another filter." />;
}
```