WAI Website Assets

Pagination 

<footer>
    <nav class="pagination">
        <ul>
            <li>
                <span class="like-a previous">Previous</span>
            </li>
            <li class="is-active"><span class="like-a">1</span></li>
            <li><a href="/news/2/">2</a></li>
            <li><a href="/news/3/">3</a></li>
            <li><a href="/news/4/">4</a></li>
            <li>
                <a href="/news/2/" class="next">Next</a>
            </li>
        </ul>
    </nav>
</footer>
 
<footer>
  <nav class="pagination">
    <ul>
      <li>
        <span class="like-a previous">Previous</span>
      </li><li class="is-active"><span class="like-a">1</span></li><li><a href="/news/2/">2</a></li><li><a href="/news/3/">3</a></li><li><a href="/news/4/">4</a></li><li>
        <a href="/news/2/" class="next">Next</a>
      </li>
    </ul>
  </nav>
</footer>
 
/* No context defined for this component. */
  • Content: 
    .pagination {
  margin: 0;
  margin-block: 16px;
  padding-block-start: 16px;
  border-block-start: 2px solid var(--line-grey);
  & ul {
    width: 100%;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: flex-end
  }
  & li {
    margin-inline-start: 8px;
  }
  & a, & .like-a {
    padding-block: 8px;
    padding-inline: 16px;
    border-radius: 4px;
    border: 2px solid var(--line-grey);
  }
  & .is-active .like-a {
    background-color: var(--w3c-blue);
    border-color: var(--w3c-blue);
    color: var(--pure-white);
  }
  & a:--hovcus {
    background-color: var(--line-grey);
  }
}
  • URL: /components/raw/pagination/pagination.css
  • Filesystem Path: components/pagination/pagination.css
  • Size: 635 Bytes

There are no notes for this item.