Product Card

Compact view of a Manifold Product. Available as a self-fetching component or a view component.

<manifold-product-card product-label="jawsdb-mysql"></manifold-product-card>


You can pass in your own CTA content in the right of the component by passing in any element with slot="cta" as an attribute. [Read more about slots][slot].

<manifold-product-card product-label="jawsdb-mysql">
  <div slot="cta">BUY ME!</div>

Fetching using the label

The manifold-product-card component can be used to fetch a product's data with a label.

<manifold-product-card product-label="logdna"></manifold-product-card>


By default, product cards will only emit the manifold-marketplace-click event (above). But it can also be turned into an <a> tag by specifying product-link-format:

<!-- <a href="/product/jawsdb-mysql"> -->

:product will be replaced with the url-friendly slug for the product.

Note that this will disable the custom events unless preserve-event is passed as well.


This component emits custom events when it updates. To listen to those events, add an event listener either on the component itself, or document:

document.addEventListener('manifold-marketplace-click', { detail } => {
  console.log(detail); // { productLabel: "jawsdb-mysql", productName: "JawsDB MySQL", productId: "234w1jyaum5j0aqe3g3bmbqjgf20p" }

The following events are emitted:

Event Name Description Data
manifold-marketplace-click Fires whenever a user has clicked on a product. productId, productLabel, productName