EU System

Skip link

Documentation • Demo

Skip link

Provides a direct link to main content.

Link is only displayed when focused (with keyboard) or to screen readers.

{#
  Parameters:
    - "href" (string) (default: '#main-content'): anchor to jump to
    - "id" (string) (default: 'skip-link')
    - "label" (string) (default: 'Skip to main content')
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-skip-link' with {
  'href': href|default(''),
  'id': id|default(''),
  'label': label|default(''),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
/* No context defined for this component. */
 
<div class="ecl-skip-link__wrapper" id="skip-link">
  <a href="#main-content" class="ecl-skip-link">Skip to main content</a>
</div>
  • Content: 
    /**
 * Skip link component
 * @define skip-link
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-skip-link/generic-component-skip-link';

// Use generic mixin
@include exports('eu-component-skip-link') {
  @include ecl-skip-link();
}
  • URL: /components/raw/eu-component-skip-link/eu-component-skip-link.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-skip-link/eu-component-skip-link.scss
  • Size: 281 Bytes
  • Handle: @ecl/eu-component-skip-link
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-skip-link/eu-component-skip-link.twig