Link Component

npm version

About

Install

This component is distributed with npm. After installing npm, you can install the vf-link with this command.

$ yarn add --dev @visual-framework/vf-link

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-link/index.scss";

Make sure you import Sass requirements along with the modules.

File system location: components/vf-link

Variants

Variant: Default live element

Nunjucks demo

{% render '@vf-link--default', {
  "component-type": "element",
  "link_href": "JavaScript:Void(0);",
  "buttonType": "default",
  "text": "A default link"
} %}

Sample output

A default link

Sample output as HTML

 <a href="JavaScript:Void(0);" class="vf-link ">A default link</a>

Assets

Variant: Example live element

Nunjucks demo

{% render '@vf-link--example', {
  "component-type": "element",
  "link_href": "JavaScript:Void(0);",
  "buttonType": "default"
} %}

Sample output

A primary link A primary:hover link A primary:visited link A disabled primary link
A primary link A primary:hover link A primary:visited link A disabled primary link
A secondary link A secondary:hover link A secondary:visited link A disabled secondary link
A secondary link A secondary:hover link A secondary:visited link A disabled secondary link

This is an example of using inline links when you are using the .vf-content container.

This is an example of using inline links when you are using the .vf-content container and the parent of the text also has a class for dark backgrounds.

Sample output as HTML

<div class="vf-grid vf-u-padding--lg">
  <!-- Primary -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary ">A primary link</a>
  <!-- Primary Hover -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary vf-link--hover">A primary:hover link</a>
  <!-- Primary Visited -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary vf-link--visited">A primary:visited link</a>
  <!-- Primary Disabled -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary vf-link--disabled" disabled>A disabled primary link</a>
</div>
<div class="vf-grid vf-u-background-color--grey--dark vf-u-padding--lg">
  <!-- Primary -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary ">A primary link</a>
  <!-- Primary Hover -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary vf-link--hover">A primary:hover link</a>
  <!-- Primary Visited -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary vf-link--visited">A primary:visited link</a>
  <!-- Primary Disabled -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--primary vf-link--disabled" disabled>A disabled primary link</a>
</div>
<div class="vf-grid vf-u-padding--lg">
  <!-- Secondary -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary ">A secondary link</a>
  <!-- Secondary Hover -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary vf-link--secondary--hover">A secondary:hover link</a>
  <!-- Secondary Visited -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary vf-link--secondary--visited">A secondary:visited link</a>
  <!-- Secondary Disabled -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary vf-link--disabled" disabled>A disabled secondary link</a>
</div>
<div class="vf-grid vf-u-background-color--grey--dark vf-u-padding--lg">
  <!-- Secondary -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary ">A secondary link</a>
  <!-- Secondary Hover -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary vf-link--secondary--hover">A secondary:hover link</a>
  <!-- Secondary Visited -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary vf-link--secondary--visited">A secondary:visited link</a>
  <!-- Secondary Disabled -->
  <a href="JavaScript:Void(0);" class="vf-link vf-link--secondary vf-link--disabled" disabled>A disabled secondary link</a>
</div>


<div class="vf-grid vf-u-padding--lg vf-content">
  <p class="vf-u-margin__bottom--0 vf-text-body vf-text-body--2">This is an example of using <a href="JavaScript:Void(0);">inline links</a> when you are using the <code>.vf-content</code> container.</p>
</div>


<div class="vf-grid | vf-u-padding--lg vf-u-background-color--grey--dark | vf-content">
  <p class="vf-u-margin__bottom--0 vf-u-text-color--ui--white vf-text-body vf-text-body--2">This is an example of using <a href="JavaScript:Void(0);">inline links</a> when you are using the <code class="vf-u-text-color--ui--black">.vf-content</code> container and the parent of the text also has a class for dark backgrounds.</p>
</div>

Assets

All components in this design system

This page is part of the components section.