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