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"
    }
  }
}