> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supplyline.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Card Components

> Custom components for linking to Supplyline products

export const ProductLinkInline = ({children}) => <span style={{
  display: 'inline-flex',
  flexWrap: 'wrap',
  gap: '8px',
  verticalAlign: 'middle'
}}>
    {children}
  </span>;

export const ProductLinkList = ({children}) => <div style={{
  display: 'flex',
  flexDirection: 'column',
  gap: '8px',
  marginTop: '12px',
  marginBottom: '12px'
}}>
    {children}
  </div>;

export const ProductLink = ({title, href, brand, partNumber}) => <a href={href} target="_blank" rel="noopener noreferrer" style={{
  display: 'inline-flex',
  alignItems: 'center',
  gap: '8px',
  textDecoration: 'none',
  color: '#4332FF',
  fontWeight: 500,
  fontSize: '14px',
  padding: '6px 12px',
  backgroundColor: '#F8F7FF',
  borderRadius: '6px',
  border: '1px solid #E8E6FF',
  transition: 'all 0.15s ease'
}} onMouseEnter={e => {
  e.currentTarget.style.backgroundColor = '#F0EEFF';
  e.currentTarget.style.borderColor = '#D4D0FF';
}} onMouseLeave={e => {
  e.currentTarget.style.backgroundColor = '#F8F7FF';
  e.currentTarget.style.borderColor = '#E8E6FF';
}}>
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
      <polyline points="15 3 21 3 21 9" />
      <line x1="10" y1="14" x2="21" y2="3" />
    </svg>
    <span>
      {brand && <span style={{
  color: '#6B7280',
  fontWeight: 400
}}>{brand} </span>}
      {title}
      {partNumber && <span style={{
  color: '#9CA3AF',
  fontWeight: 400
}}> ({partNumber})</span>}
    </span>
  </a>;

export const ProductCardGroup = ({cols = 2, children}) => <div style={{
  display: 'grid',
  gridTemplateColumns: `repeat(${cols}, 1fr)`,
  gap: '16px',
  marginTop: '16px',
  marginBottom: '16px'
}}>
    {children}
  </div>;

export const ProductCard = ({title, description, image, brand, brandLogo, href}) => <a href={href} target="_blank" rel="noopener noreferrer" style={{
  display: 'block',
  textDecoration: 'none',
  color: 'inherit',
  backgroundColor: '#FAFAFA',
  borderRadius: '12px',
  overflow: 'hidden',
  transition: 'box-shadow 0.2s ease, transform 0.2s ease',
  border: '1px solid #F0F0F0'
}} onMouseEnter={e => {
  e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)';
  e.currentTarget.style.transform = 'translateY(-2px)';
}} onMouseLeave={e => {
  e.currentTarget.style.boxShadow = 'none';
  e.currentTarget.style.transform = 'translateY(0)';
}}>
    {image && <div style={{
  backgroundColor: '#FFFFFF',
  padding: '24px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  minHeight: '160px'
}}>
        <img src={image} alt={title} style={{
  maxWidth: '100%',
  maxHeight: '140px',
  objectFit: 'contain'
}} />
      </div>}
    <div style={{
  padding: '16px 20px 20px',
  backgroundColor: '#FFFFFF',
  borderTop: image ? '1px solid #F0F0F0' : 'none'
}}>
      {(brand || brandLogo) && <div style={{
  display: 'inline-flex',
  alignItems: 'center',
  gap: '6px',
  backgroundColor: '#F9FAFB',
  border: '1px solid #E5E7EB',
  borderRadius: '6px',
  padding: '4px 10px',
  marginBottom: '12px',
  fontSize: '13px',
  fontWeight: 500,
  color: '#374151'
}}>
          {brandLogo && <img src={brandLogo} alt={brand || 'Brand'} style={{
  height: '14px',
  width: 'auto'
}} />}
          {brand && !brandLogo && <span>{brand}</span>}
        </div>}
      <div style={{
  fontSize: '16px',
  fontWeight: 600,
  color: '#111827',
  marginBottom: description ? '6px' : '0',
  lineHeight: 1.3
}}>
        {title}
      </div>
      {description && <div style={{
  fontSize: '14px',
  color: '#6B7280',
  lineHeight: 1.4
}}>
          {description}
        </div>}
    </div>
  </a>;

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

<ProductCardGroup cols={2}>
  <ProductCard title="DICE DS — Suction Lift" description="1/2″ module for suction lift applications" image="https://mintcdn.com/supplyline/n7qFcP_Z612yjD4h/images/mtc/dice/image-of-the-dice-ds-module-a-multi-port-dosing.jpeg?fit=max&auto=format&n=n7qFcP_Z612yjD4h&q=85&s=467491a61a2b49979ee30114d4e8816c" brand="MTC" href="https://supplyline.com/product/mtc/dice/ds" width="184" height="196" data-path="images/mtc/dice/image-of-the-dice-ds-module-a-multi-port-dosing.jpeg" />

  <ProductCard title="DICE DM — Flooded Suction" description="1/2″ and 1″ modules for flooded suction" image="https://mintcdn.com/supplyline/n7qFcP_Z612yjD4h/images/mtc/dice/image-of-the-dice-dm-module-a-multi-port-dosing.jpeg?fit=max&auto=format&n=n7qFcP_Z612yjD4h&q=85&s=dbc61af4bbd052c50efdbfbdfb84f295" brand="MTC" href="https://supplyline.com/product/mtc/dice/dm" width="169" height="195" data-path="images/mtc/dice/image-of-the-dice-dm-module-a-multi-port-dosing.jpeg" />
</ProductCardGroup>

### Without Image

<ProductCardGroup cols={2}>
  <ProductCard title="Pressure Gauge Assembly" description="Replacement isolator and gauge for DICE modules" brand="MTC" href="https://supplyline.com/product/mtc/dice/gauge" />

  <ProductCard title="Viton Diaphragm Kit" description="Replacement seals for aggressive chemicals" brand="MTC" href="https://supplyline.com/product/mtc/dice/viton-kit" />
</ProductCardGroup>

### Single Card

<ProductCard title="DICE Dosing Module" description="All-in-one chemical dosing solution with integrated valves" image="https://mintcdn.com/supplyline/n7qFcP_Z612yjD4h/images/mtc/dice/image-of-the-dice-dosing-module-a-compact-white.jpeg?fit=max&auto=format&n=n7qFcP_Z612yjD4h&q=85&s=124fe3a62a72fea8299eb842899be421" brand="MTC" href="https://supplyline.com/product/mtc/dice" width="196" height="610" data-path="images/mtc/dice/image-of-the-dice-dosing-module-a-compact-white.jpeg" />

***

## ProductLink

Use `ProductLink` for compact references. Best for:

* Parts lists
* Inline mentions
* Multiple related items

### Vertical List

<ProductLinkList>
  <ProductLink title="DICE DS Module" brand="MTC" partNumber="DICE-DS-050" href="https://supplyline.com/product/mtc/dice/ds" />

  <ProductLink title="DICE DM Module" brand="MTC" partNumber="DICE-DM-050" href="https://supplyline.com/product/mtc/dice/dm" />

  <ProductLink title="Viton Seal Kit" partNumber="DICE-SEAL-VIT" href="https://supplyline.com/product/mtc/dice/viton-kit" />
</ProductLinkList>

### Inline Usage

The DICE module requires a compatible metering pump such as the <ProductLinkInline><ProductLink title="LMI B Series" href="https://supplyline.com/product/lmi/b-series" /></ProductLinkInline> or similar solenoid-driven pump.

### Simple Links

<ProductLinkList>
  <ProductLink title="Replacement Gauge" href="https://supplyline.com/parts/gauge" />

  <ProductLink title="PTFE Tubing" href="https://supplyline.com/parts/tubing" />

  <ProductLink title="Ball Valve Handle" href="https://supplyline.com/parts/handle" />
</ProductLinkList>

***

## Usage

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

### Import Components

```mdx theme={null}
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`     |