Menu

Product comparison card

<article class="mp c-product-comparison-card" role="article" aria-label="Product card">
<div class="c-product-comparison-card__body">
<h3 class="c-product-comparison-card__heading">Zetasizer Pro</h3>
<p>The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.</p>
<p class="c-product-comparison-card__features-list-heading">Features include</p>
<ul class="c-product-comparison-card__features-list">
<li class="c-product-comparison-card__feature--cross">
<span class="mp c-twi c-twi--left" ><span>Classic 90° DLS</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
<use xlink:href="/static/svg/sprite.svg#cross"></use>
</svg>
</span>
</li>
<li class="c-product-comparison-card__feature--tick">
<span class="mp c-twi c-twi--left" ><span>Dynamic light scattering</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick">
<use xlink:href="/static/svg/sprite.svg#tick"></use>
</svg>
</span>
</li>
<li class="c-product-comparison-card__feature--tick">
<span class="mp c-twi c-twi--left" ><span>Static light scattering</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick">
<use xlink:href="/static/svg/sprite.svg#tick"></use>
</svg>
</span>
</li>
<li class="c-product-comparison-card__feature--tick">
<span class="mp c-twi c-twi--left" ><span>Non-Invasive Back Scatter DLS</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick">
<use xlink:href="/static/svg/sprite.svg#tick"></use>
</svg>
</span>
</li>
<li class="c-product-comparison-card__feature--cross">
<span class="mp c-twi c-twi--left" ><span>Multi-Angle Dynamic Light Scattering</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
<use xlink:href="/static/svg/sprite.svg#cross"></use>
</svg>
</span>
</li>
</ul>
<footer class="c-product-comparison-card__footer">
<a href="#" class="mp c-button c-button--outline-green" >More details</a>
<a href="#" class="mp c-button c-button--green" >Request a quote</a>
</footer>
</div>
<figure class="c-product-comparison-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": ""
},
"features": [
{
"icon": "cross",
"label": "Classic 90° DLS"
},
{
"icon": "tick",
"label": "Dynamic light scattering"
},
{
"icon": "tick",
"label": "Static light scattering"
},
{
"icon": "tick",
"label": "Non-Invasive Back Scatter DLS"
},
{
"icon": "cross",
"label": "Multi-Angle Dynamic Light Scattering"
}
],
"footer": {
"buttons": [
{
"link": "#",
"label": "More details"
},
{
"link": "#",
"label": "Request a quote"
}
]
}
}

Props

Name Type Description
title string
link string
image object Image object