VGR Styleguide

Skip link 

<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/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.