> 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/layout-widgets.md).

# Layout Widgets

A layout widget is a widget that can be dragged-and-dropped directly on a page to do its specified purpose. The layout widgets below include all components needed for a complete off-the-shelf marketplace experience. It already has a pre-defined layout that it populates with the details of a listing given the listing contract address and id.

This requires the least amount of effort to get a listing page up.

<div><figure><img src="/files/6lL6PqnTS7BKiziCCijG" alt=""><figcaption><p><code>m-layout-complete-listing</code>: auction, light</p></figcaption></figure> <figure><img src="/files/xxAmQwllNaC9cH235QO0" alt=""><figcaption><p><code>m-layout-complete-listing</code>: ranked auction, dark</p></figcaption></figure></div>

<details>

<summary>m-layout-complete-listing</summary>

This widget contains the layout for the listing page, with an image of the token in question and the auction history.

An example page created with this single widget is [yungwknd's California Sunset homepage](https://sunset.yungwknd.xyz/home).

```html
<div
  data-widget="m-layout-complete-listing"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>
```

</details>

<div><figure><img src="/files/N7uhFartAHmh6cBgQzJt" alt=""><figcaption><p><code>m-layout-bid-overlay</code>: light</p></figcaption></figure> <figure><img src="/files/L9oUdpeMOyHAqfNlRTJy" alt=""><figcaption><p><code>m-layout-bid-overlay</code>: dark</p></figcaption></figure></div>

<details>

<summary>m-layout-bid-overlay</summary>

This widget contains the layout for the bidding “modal”.

An example of this overlay in action is [yungwknd's California Sunset bid page](https://sunset.yungwknd.xyz/bid).

```html
<div
  data-widget="m-layout-bid-overlay"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>
```

</details>

<div><figure><img src="/files/LHCmeQ6DPrTLNJQhI9RV" alt=""><figcaption><p><code>m-layout-details-display</code>: light</p></figcaption></figure> <figure><img src="/files/fiGMONlCrvlpUMfQAKrD" alt=""><figcaption><p><code>m-layout-details-display</code>: dark</p></figcaption></figure></div>

<details>

<summary>m-layout-details-display</summary>

Shows the marketplace listing with only its image, title, description, attributes and links. Does not have any purchase/bid CTAs (`m-layout-complete-listing` without the bid interface).

```html
<div
  data-widget="m-layout-details-display"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>
```

</details>