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.

m-layout-complete-listing: auction, light

m-layout-complete-listing: ranked auction, dark

m-layout-complete-listing

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.

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

m-layout-bid-overlay: light

m-layout-bid-overlay: dark

m-layout-bid-overlay

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

An example of this overlay in action is yungwknd's California Sunset bid page.

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

m-layout-details-display: light

m-layout-details-display: dark

m-layout-details-display

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).

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