Product Card Components

Custom components for featuring Supplyline products in documentation. These provide a clear visual distinction from standard documentation cards—indicating external product links.

ProductCard

Use ProductCard for featuring key products with images. Best for:

Related products sections
Recommended equipment
Primary product references

Full Example (with image)

Without Image

Single Card

ProductLink

Use ProductLink for compact references. Best for:

Parts lists
Inline mentions
Multiple related items

Vertical List

Inline Usage

The DICE module requires a compatible metering pump such as the or similar solenoid-driven pump.

Simple Links

Usage

Use the examples below to import and configure the product components.

Import Components

import { ProductCard, ProductCardGroup } from '/snippets/product-card.mdx';
import { ProductLink, ProductLinkList } from '/snippets/product-link.mdx';

ProductCard Props

Prop	Type	Required	Description
`title`	string	Yes	Product name
`description`	string	No	Product type or brief description
`image`	string	No	Path to product image
`brand`	string	No	Manufacturer name (shows as badge)
`brandLogo`	string	No	Path to brand logo (replaces brand text)
`href`	string	Yes	Link to product page

ProductLink Props

Prop	Type	Required	Description
`title`	string	Yes	Product name
`href`	string	Yes	Link to product page
`brand`	string	No	Manufacturer name prefix
`partNumber`	string	No	Part/model number suffix

When to Use What

Scenario	Component
Featured products section	`ProductCard` with image
Replacement parts	`ProductCard` without image
Parts lists in tables	`ProductLink` in list
Inline product mention	`ProductLink` inline
Standard doc navigation	Regular Mintlify `Card`

Get Started

Product Support

Product Card Components

Product Card Components

ProductCard

Full Example (with image)

Without Image

Single Card

ProductLink

Vertical List

Inline Usage

Simple Links

Usage

Import Components

ProductCard Props

ProductLink Props

When to Use What

​Product Card Components

​ProductCard

​Full Example (with image)

​Without Image

​Single Card

​ProductLink

​Vertical List

​Inline Usage

​Simple Links

​Usage

​Import Components

​ProductCard Props

​ProductLink Props

​When to Use What

Product Card Components

ProductCard

Full Example (with image)

Without Image

Single Card

ProductLink

Vertical List

Inline Usage

Simple Links

Usage

Import Components

ProductCard Props

ProductLink Props

When to Use What