Project Lima pattern lib

Nav - Pagination: Default 

<h3>Default</h3>
<nav class="c-nav c-nav--center c-nav--pagination" aria-label="Pagination Default">
    <ul class="c-nav__list" role="menubar">
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Previous Page">PREV</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 1 of 10">1</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 2 of 10">2</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--current" aria-current="page" title="Page 3 of 10">3</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 4 of 10">4</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 5 of 10">5</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <span class="c-nav__link" role="separator">...</span>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 10 of 10">10</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Next Page">NEXT</a>
        </li>
    </ul>
</nav>
 
<h3>{{ singletitle }}</h3>
<nav class="c-nav c-nav--center c-nav--pagination{{ modifier }}" aria-label="Pagination {{ singletitle }}">
    <ul class="c-nav__list" role="menubar">
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Previous Page">PREV</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 1 of 10">1</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 2 of 10">2</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--current" aria-current="page" title="Page 3 of 10">3</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 4 of 10">4</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 5 of 10">5</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <span class="c-nav__link" role="separator">...</span>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link" title="Page 10 of 10">10</a>
        </li>
        <li class="c-nav__list-element" role="none">
            <a href="#" role="menuitem" class="c-nav__link c-nav__link--direction" title="Next Page">NEXT</a>
        </li>
    </ul>
</nav>
 
{
  "name": "Default",
  "modifier": null,
  "singletitle": "Default"
}

The pagination menu is a modified variant of the nav menu, to get this to work simply add the .c-nav–pagination class to the main .c-nav container.