Product card - With features list

<article class="mp c-product-card c-product-card--features-list" 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>
    <p class="c-product-card__features-list-heading">Features include</p>
    <ul class="c-product-card__features-list">
      <li class="c-product-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-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-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-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-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-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-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"
      },
      {
        "link": "#",
        "label": "Request a quote"
      }
    ]
  },
  "classes": "c-product-card--features-list",
  "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"
    }
  ]
}