Link opacity
vue
<template>
<p>
<Anchor
link-opacity="10"
to="/"
>
Link opacity 10
</Anchor>
</p>
<p>
<Anchor
link-opacity="25"
to="/"
>
Link opacity 25
</Anchor>
</p>
<p>
<Anchor
link-opacity="50"
to="/"
>
Link opacity 50
</Anchor>
</p>
<p>
<Anchor
link-opacity="75"
to="/"
>
Link opacity 75
</Anchor>
</p>
<p>
<Anchor
link-opacity="100"
to="/"
>
Link opacity 100
</Anchor>
</p>
</template>
vue
<template>
<p>
<Anchor
link-opacity="10-hover"
to="/"
>
Link opacity 10
</Anchor>
</p>
<p>
<Anchor
link-opacity="25-hover"
to="/"
>
Link opacity 25
</Anchor>
</p>
<p>
<Anchor
link-opacity="50-hover"
to="/"
>
Link opacity 50
</Anchor>
</p>
<p>
<Anchor
link-opacity="75-hover"
to="/"
>
Link opacity 75
</Anchor>
</p>
<p>
<Anchor
link-opacity="100-hover"
to="/"
>
Link opacity 100
</Anchor>
</p>
</template>
Link underlines
Underline color
vue
<template>
<p>
<Anchor
link-underline="primary"
to="/"
>
Primary underline
</Anchor>
</p>
<p>
<Anchor
link-underline="secondary"
to="/"
>
Secondary underline
</Anchor>
</p>
<p>
<Anchor
link-underline="success"
to="/"
>
Success underline
</Anchor>
</p>
<p>
<Anchor
link-underline="danger"
to="/"
>
Danger underline
</Anchor>
</p>
<p>
<Anchor
link-underline="warning"
to="/"
>
Warning underline
</Anchor>
</p>
<p>
<Anchor
link-underline="info"
to="/"
>
Info underline
</Anchor>
</p>
<p>
<Anchor
link-underline="light"
to="/"
>
Light underline
</Anchor>
</p>
<p>
<Anchor
link-underline="dark"
to="/"
>
Dark underline
</Anchor>
</p>
</template>
Underline offset
vue
<template>
<p>
<Anchor to="/">
Default link
</Anchor>
</p>
<p>
<Anchor
link-offset="1"
to="/"
>
Offset 1 link
</Anchor>
</p>
<p>
<Anchor
link-offset="2"
to="/"
>
Offset 2 link
</Anchor>
</p>
<p>
<Anchor
link-offset="3"
to="/"
>
Offset 3 link
</Anchor>
</p>
</template>
Underline opacity
vue
<template>
<p>
<Anchor
link-offset="2"
link-underline="0"
to="/"
>
Underline opacity 0
</Anchor>
</p>
<p>
<Anchor
link-offset="2"
link-underline="10"
to="/"
>
Underline opacity 10
</Anchor>
</p>
<p>
<Anchor
link-offset="2"
link-underline="25"
to="/"
>
Underline opacity 25
</Anchor>
</p>
<p>
<Anchor
link-offset="2"
link-underline="50"
to="/"
>
Underline opacity 50
</Anchor>
</p>
<p>
<Anchor
link-offset="2"
link-underline="75"
to="/"
>
Underline opacity 75
</Anchor>
</p>
<p>
<Anchor
link-offset="2"
link-underline="100"
to="/"
>
Underline opacity 100
</Anchor>
</p>
</template>
Hover variants
vue
<template>
<Anchor
link-offset="2 3-hover"
link-underline="0 75-hover"
to="/"
>
Underline opacity 0
</Anchor>
</template>
Colored links
vue
<template>
<p>
<Anchor
color="primary"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Primary link
</Anchor>
</p>
<p>
<Anchor
color="secondary"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Secondary link
</Anchor>
</p>
<p>
<Anchor
color="success"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Success link
</Anchor>
</p>
<p>
<Anchor
color="danger"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Danger link
</Anchor>
</p>
<p>
<Anchor
color="warning"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Warning link
</Anchor>
</p>
<p>
<Anchor
color="info"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Info link
</Anchor>
</p>
<p>
<Anchor
color="light"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Light link
</Anchor>
</p>
<p>
<Anchor
color="dark"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Dark link
</Anchor>
</p>
<p>
<Anchor
color="body-emphasis"
link-offset="2"
link-underline="25 75-hover"
to="/"
>
Emphasis link
</Anchor>
</p>
</template>
Extend
External links
By adding the external attribute, you can create links that include an icon and add target="_blank" and rel="noopener".
vue
<template>
<p>
<Anchor
external
to="https://getbootstrap.com/"
>
Bootstrap
</Anchor>
</p>
</template>
Anchor button
vue
<template>
<Anchor
button
color="primary"
to="/"
>
Link
</Anchor>
<b-button
color="primary"
type="submit"
>
Button
</b-button>
</template>