multipleCards.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML MOCKER DEMO</title>
    <link rel="stylesheet" href="multipleCards.css" />
  </head>

  <body>
    <main>
      <div class="row hm-list hm-size-1__8">
        <div class="card blue">
          <h1 class="hm-list-text hm-size-10__15">Headline #1</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
            vulputate est non neque faucibus elementum.
          </p>
          <a class="cta" href="#" title="CTA">CTA #1</a>
        </div>
        <div class="card orange">
          <h1 class="hm-list-text hm-size-10__15">Headline #2</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            sollicitudin sagittis luctus. Duis id lacinia massa. Vestibulum diam
            purus, tempor.
          </p>
          <a class="cta" href="#" title="CTA">CTA #2</a>
        </div>
        <div class="card blue">
          <h1 class="hm-list-text hm-size-10__15">Headline #3</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            sollicitudin sagittis luctus. Aliquam erat volutpat. Vestibulum diam
            purus, tempor.
          </p>
          <a class="cta" href="#" title="CTA">CTA #3</a>
        </div>
        <div class="card orange">
          <h1 class="hm-list-text hm-size-10__15">Headline #4</h1>
          <p>
            Lorem ipsum dolor sit amet. Duis sollicitudin sagittis luctus.
            Aliquam erat volutpat. Duis id lacinia massa. Vestibulum diam purus,
            tempor.
          </p>
          <a class="cta" href="#" title="CTA">CTA #4</a>
        </div>
        <div class="card blue">
          <h1 class="hm-list-text hm-size-10__15">Headline #5</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
            vulputate est non neque faucibus elementum.
          </p>
          <a class="cta" href="#" title="CTA">CTA #5</a>
        </div>
        <div class="card orange">
          <h1 class="hm-list-text hm-size-10__15">Headline #6</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            sollicitudin sagittis luctus. Vestibulum diam purus, tempor.
          </p>
          <a class="cta" href="#" title="CTA">CTA #6</a>
        </div>
        <div class="card blue">
          <h1 class="hm-list-text hm-size-10__15">Headline #7</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            sollicitudin sagittis luctus. Aliquam erat volutpat.
          </p>
          <a class="cta" href="#" title="CTA">CTA #7</a>
        </div>
        <div class="card orange">
          <h1 class="hm-list-text hm-size-10__15">Headline #8</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            sollicitudin sagittis luctus. Aliquam erat volutpat. Duis id lacinia
            massa. Vestibulum diam purus, tempor. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit.
          </p>
          <a class="cta" href="#" title="CTA">CTA #8</a>
        </div>
      </div>
    </main>
    <script src="htmlmocker.js"></script>
  </body>
</html>