Preview Pagination - Component

<h2 class="visually-hidden">{{ title }}</h2>
<nav class="preview-pagination" aria-label="pagination">
  {% if data.prev %}
    <a class="preview-pagination__item flow" href="{{ data.prev.url }}" data-dir="prev">
      <div class="preview-pagination__meta cluster">
        {% include "icons/arrow-back.svg" %}
        {% for item in data.prev.meta %}
          <span>{{ item}}</span> 
        {% endfor %}
      </div>
      <h3 class="preview-pagination__heading">{{ data.prev.title }}</h3>
      {% if data.prev.description %}
        <p>{{ data.prev.description }}</p>
      {% endif %}
    </a>
  {% endif %}
  {% if data.next %}
    <a class="preview-pagination__item flow" href="{{ data.next.url }}" data-dir="next">
      <div class="preview-pagination__meta cluster">
        {% include "icons/arrow-forward.svg" %}
        {% for item in data.next.meta %}
          <span>{{ item}}</span> 
        {% endfor %}
      </div>
      <h3 class="preview-pagination__heading">{{ data.next.title }}</h3>
      {% if data.next.description %}
        <p>{{ data.next.description }}</p>
      {% endif %}
    </a>
  {% endif %}
</nav>

<h2 class="visually-hidden"></h2>
<nav class="preview-pagination" aria-label="pagination">
  <a class="preview-pagination__item flow" href="#" data-dir="next">
    <div class="preview-pagination__meta cluster">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24"
        width="24"
        viewBox="0 0 24 24"
      >
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
      </svg>
      <span>next</span>
      <span>018</span>
    </div>
    <h3 class="preview-pagination__heading">Z-index and stacking contexts</h3>
    <p>
      In this module find out how to control the order in which things layer on
      top of each other, by using z-index and the stacking context.
    </p>
  </a>
</nav>

<h2 class="visually-hidden">{{ title }}</h2>
<nav class="preview-pagination" aria-label="pagination">
  {% if data.prev %}
    <a class="preview-pagination__item flow" href="{{ data.prev.url }}" data-dir="prev">
      <div class="preview-pagination__meta cluster">
        {% include "icons/arrow-back.svg" %}
        {% for item in data.prev.meta %}
          <span>{{ item}}</span> 
        {% endfor %}
      </div>
      <h3 class="preview-pagination__heading">{{ data.prev.title }}</h3>
      {% if data.prev.description %}
        <p>{{ data.prev.description }}</p>
      {% endif %}
    </a>
  {% endif %}
  {% if data.next %}
    <a class="preview-pagination__item flow" href="{{ data.next.url }}" data-dir="next">
      <div class="preview-pagination__meta cluster">
        {% include "icons/arrow-forward.svg" %}
        {% for item in data.next.meta %}
          <span>{{ item}}</span> 
        {% endfor %}
      </div>
      <h3 class="preview-pagination__heading">{{ data.next.title }}</h3>
      {% if data.next.description %}
        <p>{{ data.next.description }}</p>
      {% endif %}
    </a>
  {% endif %}
</nav>

<h2 class="visually-hidden"></h2>
<nav class="preview-pagination" aria-label="pagination">
  <a class="preview-pagination__item flow" href="#" data-dir="prev">
    <div class="preview-pagination__meta cluster">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24"
        width="24"
        viewBox="0 0 24 24"
      >
        <path d="M0 0h24v24H0z" fill="none" />
        <path
          d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
        />
      </svg>
      <span>prev</span>
      <span>016</span>
    </div>
    <h3 class="preview-pagination__heading">Shadows</h3>
  </a>
</nav>