@frankhoodbs/skip-link-cmp
v1.2.8
Published
Skip to content link component
Downloads
459
Keywords
Readme
Skip to content Component
The "Skip to Content Component" is a Vue component that offers a convenient way to provide a "Skip to content" link, enhancing the accessibility of your website.
Installation
To install, use npm:
npm install @frankhoodbs/skip-link-cmp
Props
| Name | Type | Default | Description |
|---------------------|-----------------------|------------|-----------------------------------------|
| data-href
| String | #content
| The href attribute for the skip link. |
| data-link-classes
| String, Object, Array | - | Custom classes to be added to the link. |
Slots
| Name | Description |
|-----------|-----------------------------------------|
| default
| Slot for customizing skip link content. |
Custom CSS Properties
| Name | Default Value | Description |
|-----------------------------|--------------------------------|---------------------------------------|
| --skip-link-padding-y
| 12px
| Vertical padding for the skip link. |
| --skip-link-padding-x
| 20px
| Horizontal padding for the skip link. |
| --skip-link-color
| black
| Color of the skip link text. |
| --skip-link-background
| white
| Background color of the skip link. |
| --skip-link-border-width
| 1px
| Border width of the skip link. |
| --skip-link-border-color
| black
| Border color of the skip link. |
| --skip-link-border-radius
| 4px
| Border radius of the skip link. |
| --skip-link-font-size
| 1rem
(--fh-base-font-size
) | Font size of the skip link text. |
| --skip-link-line-height
| 1
(--fh-base-line-height
) | Line height of the skip link text. |