<script src="https://quoteapi.com/lib/1.15.7/quoteapi-loader.js" integrity="sha256-kJqBnp944BwFlkXp7kYJrarrpXTrVSCO7R8i2eKkuf4= sha51
2-srIP/oXEtvnO/K5vuXdAS4Zjfu7bUWoQSyogRuy59E4P7TfhBebPsrjWkkonIRrXwyzH1xVVr6VZrnK58mY8RA==" crossorigin="anonymous"></script>

<script src="https://irmn01.irmau.com/site/content/js/quoteapi.js"></script>

<div class="shareprice-grid">
  <div class="grid-x">
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>Buy</h4>
        <p data-quoteapi="bid">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>Sell</h4>
        <p data-quoteapi="ask">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>First</h4>
        <p data-quoteapi="open">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>High</h4>
        <p data-quoteapi="high">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>Low</h4>
        <p data-quoteapi="low">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>Last</h4>
        <p data-quoteapi="close">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>MktPrice</h4>
        <p data-quoteapi="price">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>Change</h4>
        <p data-quoteapi="change">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>Vol</h4>
        <p data-quoteapi="volume">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>Total Trades</h4>
        <p data-quoteapi="tradeCount">&nbsp;</p>
      </div>
    </div>
    <div class="large-1 medium-4 small-6">
      <div class="sp-item">
        <h4>MktCap</h4>
        <p data-quoteapi="marketCap">&nbsp;</p>
      </div>
    </div>
  </div>
</div>
.sp-item h4 {
    background: #CCC;
    font-size: 14px;
    padding: 10px;
    text-align: center;
    min-height: 52px;
    font-weight: bold;
    font-family:"Montserrat", "Open Sans", sans-serif;
}
.sp-item {
    text-align: center;
    background: #EEE;
    min-height: 98px;
    font-family:"Montserrat", "Open Sans", sans-serif;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  3. https://fonts.googleapis.com/css?family=Open+Sans:400,600,700
  4. https://fonts.googleapis.com/css?family=Montserrat:400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.