Pinecone

Pagination: Inverse 

<div class="spacer"></div>
<nav class="navigation pagination pagination--inverse" role="navigation" aria-label="resources">
    <h2 class="screen-reader-text">resources navigation</h2>
    <div class="nav-links">
        <a class="previous link link--pagination" href="1">
            <span class="screen-reader-text">Previous 10 resources</span><svg class="icon icon--chevron-left" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
                <use href="/images/chevron-left.svg#chevron-left" />
            </svg>
        </a>
        <span aria-current="page" class="page current">2</span>
        <a class="link link--pagination" href="3"><span class="screen-reader-text">page </span>3</a>
        <span class="page dots">…</span>
        <a class="link link--pagination" href="61"><span class="screen-reader-text">page </span>61<span class="screen-reader-text"> (last)</span></a>
        <a class="next link link--pagination" href="3">
            <span class="screen-reader-text">Next 10 resources</span><svg class="icon icon--chevron-right" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
                <use href="/images/chevron-right.svg#chevron-right" />
            </svg>
        </a>
    </div>
</nav>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
<nav class="navigation pagination{% if modifier %} pagination--{{ modifier }}{% endif %}" role="navigation" aria-label="{{ contentType }}">
	<h2 class="screen-reader-text">{{ contentType }} navigation</h2>
	<div class="nav-links">
		<a class="previous link link--pagination" href="1">
			<span class="screen-reader-text">Previous {{ perPage }} {{ contentType }}</span>{% render '@svg', {svg:'chevron-left'}, true %}
		</a>
		<span aria-current="page" class="page current">2</span>
		<a class="link link--pagination" href="3"><span class="screen-reader-text">page </span>3</a>
		<span class="page dots">…</span>
		<a class="link link--pagination" href="61"><span class="screen-reader-text">page </span>61<span class="screen-reader-text"> (last)</span></a>
		<a class="next link link--pagination" href="3">
			<span class="screen-reader-text">Next {{ perPage }} {{ contentType }}</span>{% render '@svg', {svg:'chevron-right'}, true %}
		</a>
	</div>
</nav>
 
{
  "contentType": "resources",
  "perPage": 10,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.