FTSE Russell Styleguide

In Page Navigation 

<div class="in_page_navigation">
    <a class="in_page_navigation__next" href="#">
    <span>NEXT</span>
    <svg class="in_page_navigation__icon">
      <use xlink:href="/assets/sprites/icons.svg#ico-right-arrow"></use>
    </svg>
  </a>
</div>
 
<div class="in_page_navigation">
  <a class="in_page_navigation__next" href="{{ next_url }}">
    <span>{{ next_text }}</span>
    <svg class="in_page_navigation__icon">
      <use xlink:href="/assets/sprites/icons.svg#ico-right-arrow"></use>
    </svg>
  </a>
</div>
 
{
  "next_text": "NEXT",
  "next_url": "#"
}
  • Content: 
    .in_page_navigation {
  border-top: $border-width-thick solid $gray-lighter;
  padding: $space-md $space-xs 0;
  text-align: right;

  @include mq($breakpoint-lg) {
    padding: 3.25rem $space-xs 0;
  }

  a {
    cursor: pointer;
  }

  &__next {
    span,
    svg {
      display: inline-block;
      vertical-align: middle;
    }

    span {
      font-weight: $font-weight-normal;
      letter-spacing: .1em;
      color: $secondary;
    }

    svg {
      fill: $secondary;
      height: 16px;
      margin-left: $space-md;
      width: 16px;
    }
  }
}
  • URL: /components/raw/in_page_navigation/_in_page_navigation.scss
  • Filesystem Path: src/components/atoms/in_page_navigation/_in_page_navigation.scss
  • Size: 560 Bytes

There are no notes for this item.