Menu

Product card

<article class="mp c-product-card" role="article" aria-label="Product card">
<div class="c-product-card__body">
<h3 class="c-product-card__heading">
Zetasizer Pro</h3>
<p class="c-product-card__lede">The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.</p>
<footer class="c-product-card__footer">
<a href="#" class="mp c-button c-button--small c-button--outline-green" >More details</a>
<a href="#" class="mp c-button c-button--small c-button--green" >Request a quote</a>
</footer>
</div>
<figure class="c-product-card__image">
<img src="/static/img/range-product-1.jpg" alt="Zetasizer Pro" />
</figure>
</article>
{
"title": "Zetasizer Pro",
"description": "The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.",
"image": {
"src": "/static/img/range-product-1.jpg",
"alt": ""
},
"footer": {
"buttons": [
{
"link": "#",
"label": "More details",
"classes": "c-button--small"
},
{
"link": "#",
"label": "Request a quote",
"classes": "c-button--small"
}
]
}
}

Props

Name Type Description
title string
link string
image object Image object