Menu

Technology card

<article class="mp c-technology-card" role="article" aria-label="Technology card">
<div class="c-technology-card__body">
<h3 class="c-technology-card__heading">
<a href="#" aria-label="X-ray Diffraction (XRD)">
X-ray Diffraction (XRD)</a>
</h3>
<p class="c-technology-card__lede">XRD is the only laboratory technique that non-destructively and accurately obtains information such as chemical composition.</p>
<footer class="c-technology-card__footer">
<span class="mp c-twi c-twi--small u-link c-twi--left" ><span>View technology</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
<use xlink:href="/static/svg/sprite.svg#arrow-right"></use>
</svg>
</span>
</footer>
</div>
<figure class="c-technology-card__image">
<img src="/static/img/range-product-1.jpg" alt="X-ray Diffraction (XRD)" />
</figure>
</article>
{
"title": "X-ray Diffraction (XRD)",
"link": "#",
"description": "XRD is the only laboratory technique that non-destructively and accurately obtains information such as chemical composition.",
"image": {
"src": "/static/img/range-product-1.jpg",
"alt": ""
},
"footer": {
"button": {
"label": "View technology"
}
}
}

Props

Name Type Description
title string
link string
image object Image object