WAI Website Assets

Pager 

<nav class="pager" aria-label="Tutorials Navigation">
    <ul>
        <li class="pager--item previous">
            <a href="/previous">
        <svg aria-hidden="true" class="pager--item-icon icon-arrow-left"><use xlink:href="/assets/images/icons.svg#icon-arrow-left"></use></svg>
        <span class="pager--item-text">
          <span class="pager--item-text-direction">Previous:</span>
          <span class="pager--item-text-target">Overview</span>
        </span>
      </a>
        </li>
        <li class="pager--item next">
            <a href="/next">
        <svg aria-hidden="true" class="pager--item-icon icon-arrow-right"><use xlink:href="/assets/images/icons.svg#icon-arrow-right"></use></svg>
        <span class="pager--item-text">
          <span class="pager--item-text-direction">Next:</span>
          <span class="pager--item-text-target">2. Tutorial Section 2</span>
        </span>
      </a>
        </li>
    </ul>
</nav>
 
<nav class="pager" aria-label="Tutorials Navigation">
  <ul>
    <li class="pager--item previous">
      <a href="/previous">
        <svg aria-hidden="true" class="pager--item-icon icon-arrow-left"><use xlink:href="/assets/images/icons.svg#icon-arrow-left"></use></svg>
        <span class="pager--item-text">
          <span class="pager--item-text-direction">Previous:</span>
          <span class="pager--item-text-target">Overview</span>
        </span>
      </a>
    </li>
    <li class="pager--item next">
      <a href="/next">
        <svg aria-hidden="true" class="pager--item-icon icon-arrow-right"><use xlink:href="/assets/images/icons.svg#icon-arrow-right"></use></svg>
        <span class="pager--item-text">
          <span class="pager--item-text-direction">Next:</span>
          <span class="pager--item-text-target">2. Tutorial Section 2</span>
        </span>
      </a>
    </li>
  </ul>
</nav>
 
/* No context defined for this component. */
  • Content: 
    .pager {
  background-color: var(--pure-white);
  border: 1px solid var(--line-grey);
  margin-block-start: 32px;
}

.pager > ul {
  box-sizing: border-box;
  align-content: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px;
}

.pager--item {
  display: flex;
  flex: 0 1 50%;
  &:only-child {
    flex-basis: 100%;
  }
  list-style: none;
  margin:0;
}

.pager--item a:link {
  color: var(--wai-green);
  display: flex;
  flex-direction: row;
  flex: 1 100%;
  text-decoration: none;
  align-items: center;
}

.pager--item a:visited {
  color: var(--visited-link);
}

.pager--item a:hover,
.pager--item a:focus {
  color: var(--w3c-blue);
}

.pager--item a:active {
  color: var(--wai-green);
}

.pager--item.next a {
  flex-direction: row-reverse;
  justify-content: flex-end;
  text-align: end;
}

.pager--item-icon {
  display: flex;
  font-size: 33px;
}

.pager--item-text {
  display: flex;
  flex: 1 auto;
  width: 100%;
  flex-direction: column;
  margin-inline-end: 8px;
  margin-inline-start: 8px;
}

.pager--item-text-direction {
  color: var(--off-black);
  font-size: .75rem;
}

.pager--item-text-target {
  font-size: 1rem;
  line-height: 1;
}
  • URL: /components/raw/pager/pager.css
  • Filesystem Path: components/pager/pager.css
  • Size: 1.2 KB

There are no notes for this item.