Link
Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
On this page
Link opacity
<template>
<p>
<b-a
link-opacity="10"
href="#"
>
Link opacity 10
</b-a>
</p>
<p>
<b-a
link-opacity="25"
href="#"
>
Link opacity 25
</b-a>
</p>
<p>
<b-a
link-opacity="50"
href="#"
>
Link opacity 50
</b-a>
</p>
<p>
<b-a
link-opacity="75"
href="#"
>
Link opacity 75
</b-a>
</p>
<p>
<b-a
link-opacity="100"
href="#"
>
Link opacity 100
</b-a>
</p>
</template>
<template>
<p>
<b-a
link-opacity="10-hover"
href="#"
>
Link opacity 10
</b-a>
</p>
<p>
<b-a
link-opacity="25-hover"
href="#"
>
Link opacity 25
</b-a>
</p>
<p>
<b-a
link-opacity="50-hover"
href="#"
>
Link opacity 50
</b-a>
</p>
<p>
<b-a
link-opacity="75-hover"
href="#"
>
Link opacity 75
</b-a>
</p>
<p>
<b-a
link-opacity="100-hover"
href="#"
>
Link opacity 100
</b-a>
</p>
</template>
Link underlines
Underline color
<template>
<p>
<b-a
link-underline="primary"
href="#"
>
Primary underline
</b-a>
</p>
<p>
<b-a
link-underline="secondary"
href="#"
>
Secondary underline
</b-a>
</p>
<p>
<b-a
link-underline="success"
href="#"
>
Success underline
</b-a>
</p>
<p>
<b-a
link-underline="danger"
href="#"
>
Danger underline
</b-a>
</p>
<p>
<b-a
link-underline="warning"
href="#"
>
Warning underline
</b-a>
</p>
<p>
<b-a
link-underline="info"
href="#"
>
Info underline
</b-a>
</p>
<p>
<b-a
link-underline="light"
href="#"
>
Light underline
</b-a>
</p>
<p>
<b-a
link-underline="dark"
href="#"
>
Dark underline
</b-a>
</p>
</template>
Underline offset
<template>
<p>
<b-a href="#">
Default link
</b-a>
</p>
<p>
<b-a
link-offset="1"
href="#"
>
Offset 1 link
</b-a>
</p>
<p>
<b-a
link-offset="2"
href="#"
>
Offset 2 link
</b-a>
</p>
<p>
<b-a
link-offset="3"
href="#"
>
Offset 3 link
</b-a>
</p>
</template>
Underline opacity
<template>
<p>
<b-a
link-offset="2"
link-underline="0"
href="#"
>
Underline opacity 0
</b-a>
</p>
<p>
<b-a
link-offset="2"
link-underline="10"
href="#"
>
Underline opacity 10
</b-a>
</p>
<p>
<b-a
link-offset="2"
link-underline="25"
href="#"
>
Underline opacity 25
</b-a>
</p>
<p>
<b-a
link-offset="2"
link-underline="50"
href="#"
>
Underline opacity 50
</b-a>
</p>
<p>
<b-a
link-offset="2"
link-underline="75"
href="#"
>
Underline opacity 75
</b-a>
</p>
<p>
<b-a
link-offset="2"
link-underline="100"
href="#"
>
Underline opacity 100
</b-a>
</p>
</template>
Hover variants
<template>
<b-a
link-offset="2 3-hover"
link-underline="0 75-hover"
href="#"
>
Underline opacity 0
</b-a>
</template>
Colored links
<template>
<p>
<b-a
link="primary"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Primary link
</b-a>
</p>
<p>
<b-a
link="secondary"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Secondary link
</b-a>
</p>
<p>
<b-a
link="success"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Success link
</b-a>
</p>
<p>
<b-a
link="danger"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Danger link
</b-a>
</p>
<p>
<b-a
link="warning"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Warning link
</b-a>
</p>
<p>
<b-a
link="info"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Info link
</b-a>
</p>
<p>
<b-a
link="light"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Light link
</b-a>
</p>
<p>
<b-a
link="dark"
link-offset="2"
link-underline="25 100-hover"
href="#"
>
Dark link
</b-a>
</p>
<p>
<b-a
link="body-emphasis"
link-offset="2"
link-underline="25 75-hover"
href="#"
>
Emphasis link
</b-a>
</p>
</template>