dxw style

Skiplink 

<div id="skiplink-container">
    <div>
        <a href="#content" class="skiplink">Skip to main content</a>
    </div>
</div>
 
<div id="skiplink-container">
  <div>
    <a href="#content" class="skiplink">{{ skip_link_message|default('Skip to main content') }}</a>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .skiplink {
  position: absolute;
  left: -9999em;
}

.skiplink:focus, .skiplink:visited {
  color: $link-colour;
  background-color: $white;
  padding: 5px;
}

.skiplink:focus {
  left: 0;
  z-index: 1;
}

#skiplink-container {
  text-align: center;
  background: $grey-3;
}

#skiplink-container div {
  text-align: left;
  margin: 0 auto;
  max-width: 1020px;
}

#skiplink-container .skiplink {
  display: -moz-inline-stack;
  display: inline-block;
  margin: 0.75em 0 0 30px;
}
  • URL: /components/raw/skiplink/skiplink.scss
  • Filesystem Path: components/skiplink/skiplink.scss
  • Size: 481 Bytes

For accessibility. Made visible when they are tabbed to.