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 | Font size of the skip link text. | | --skip-link-line-height | 1 | Line height of the skip link text. |