# Product Detail

This is what a detail page looks like when a user clicks "View Details" on a product card. The URL would be `/products/detail?slug=wireless-headphones` — the `data-param` reads the query string and fetches the matching record.

```
data: products
data-display: detail
data-param: slug
data-key: slug
data-field: Name: name
data-field: Price: {{price}}
data-field: Description: description
data-field: In Stock: stock_status
```

<div class="sitemd-data" style="margin:var(--space-lg) 0">
<div class="sitemd-data-content">
<dl class="sitemd-data-detail">
<div class="data-detail-row">
<dt class="data-detail-label">Name</dt>
<dd class="data-detail-value">Wireless Headphones</dd>
</div>
<div class="data-detail-row">
<dt class="data-detail-label">Price</dt>
<dd class="data-detail-value">$79</dd>
</div>
<div class="data-detail-row">
<dt class="data-detail-label">Description</dt>
<dd class="data-detail-value">Premium over-ear headphones with active noise cancelling and 30-hour battery life</dd>
</div>
<div class="data-detail-row">
<dt class="data-detail-label">In Stock</dt>
<dd class="data-detail-value">Available</dd>
</div>
</dl>
</div>
</div>

[&larr; Back to Dynamic Data docs](/docs/dynamic-data)