> For the complete documentation index, see [llms.txt](https://docs.manifold.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/marketplace-widgets/widgets/card-widgets.md).

# Card Widgets

Cards are standalone blocks with a predefined layout, used when displaying a collection of listings.

<div><figure><img src="/files/95JrXY2XjZmPk8WVogrV" alt=""><figcaption><p><code>m-card-catalog</code>: light</p></figcaption></figure> <figure><img src="/files/IR1nhE8p8x1TgMNnOv6I" alt=""><figcaption><p><code>m-card-catalog</code>: dark</p></figcaption></figure></div>

<details>

<summary>m-card-catalog</summary>

**\[Updated name] In versions < 3.0.0:** `m-catalog-card`.

Shows the listing's image and details along with a status indicator on the top-right corner of the card.

<img src="/files/f27Pu98IU77kwcbUdwaQ" alt="" data-size="original">

```html
<div
  data-widget="m-card-catalog"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>
```

</details>

<div><figure><img src="/files/7ynHnesnywOnsmX1AWfM" alt=""><figcaption><p><code>m-card-countdown</code>: light</p></figcaption></figure> <figure><img src="/files/FLxyuq8Vp2GEi8yZwIIf" alt=""><figcaption><p><code>m-card-countdown</code>: dark</p></figcaption></figure></div>

<details>

<summary>m-card-countdown</summary>

**\[Updated name] In versions < 3.0.0:** `m-countdown-card`.

Shows the listing's image and details along with a countdown at the bottom of the card. If the auction has ended, it will display the text "Ended" instead.

```html
<div
  data-widget="m-card-countdown"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>
```

</details>

<div><figure><img src="/files/DrjvALhk1GI6G9ykEHdH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8w0bxbWKNiptofF2cE92" alt=""><figcaption></figcaption></figure></div>

<details>

<summary><strong>m-card-ad</strong></summary>

**New in versions >= 3.0.0**

Shows the listing's media and name along with its price details at the bottom of the card. The status of the listing is displayed at the top left. Typically used to promote work by the same artist.

```html
<div
  data-widget="m-card-ad"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>
```

</details>

{% hint style="info" %}
Displaying a card widget with other layout/card/listing widgets **for the same listing** is supported in version >= 2.4.0.
{% endhint %}