<a href="#main-content" class="vgr-skip-link">Direkt till huvudinnehållet</a>
<a href="{{ url }}" class="{{ class }}">{{ label }}</a>
  "url": "#main-content",
  "class": "vgr-skip-link",
  "label": "Direkt till huvudinnehållet"
  • Content:
    $vgr-skip-link-color: $color-white;
    $vgr-skip-link-background: $theme-color-darkest;
    .vgr-skip-link {
      position: absolute;
      top: -5rem;
      z-index: $level-top;
      display: inline-block;
      margin-left: .625rem;
      padding: .5rem 1.5rem;
      background: $vgr-skip-link-background;
      box-shadow: .125rem .125rem 1rem rgba($vgr-skip-link-background, .5);
      color: $vgr-skip-link-color;
      text-decoration: none;
      transition: top .3s ease-in-out;
      &:focus {
        top: 1rem;
  • URL: /components/raw/skip-link/_skip-link.scss
  • Filesystem Path: components/navigations/skip-link/_skip-link.scss
  • Size: 474 Bytes

Skip link

Place mouse pointer inside the preview area and press tab on your keyboard to view the skip link.

Learn more about skip links.