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/ec-base/ec-base'; @import '@ecl/generic-component-skip-link/generic-component-skip-link'; // Use generic mixin @include exports('ec-component-skip-link') { @include ecl-skip-link(); }
- URL: /components/raw/ec-component-skip-link/ec-component-skip-link.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-skip-link/ec-component-skip-link.scss
- Size: 281 Bytes
- Handle: @ecl/ec-component-skip-link
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-skip-link/ec-component-skip-link.twig