Verndale UI Components

Link component: Default 

<a href="#" class="link link--primary">
    Hover on me
</a>
 
<a href="#" class="link{{#if className}} link--{{className}}{{/if}}{{#ifCond size "==" "small"}} link--small{{/ifCond}}">
  {{#ifCond icon "==" "left"}}
    {{>svg name="chevron-left" className="link__icon link__icon--left" viewBox="0 0 6 10"}}
  {{/ifCond}}
  {{label}}
  {{#ifCond icon "==" "right"}}
    {{>svg name="chevron-right" className="link__icon link__icon--right" viewBox="0 0 6 10"}}
  {{/ifCond}}
</a>
 
{
  "label": "Hover on me",
  "size": "large",
  "icon": "none",
  "className": "primary"
}
  • Content: 
    @import '../theme', 'variables';

.link {
  align-items: center;
  display: inline-flex;
  font-size: 18px;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }

  &.link--small {
    font-size: 14px;
  }

  &.link--primary {
    color: $primary;

    .link__icon {
      fill: $primary;
    }
  }

  &.link--secondary {
    color: $secondary;

    .link__icon {
      fill: $secondary;
    }
  }

  .link__icon {
    height: 10px;
    margin-left: 12px;
    width: 6px;
  }

  .link__icon--left {
    margin-right: 12px;
  }

  .link__icon--right {
    margin-left: 12px;
  }
}
  • URL: /components/raw/link/_styles.scss
  • Filesystem Path: src/components/link/_styles.scss
  • Size: 611 Bytes
  • Content: 
    $primary: map-get($theme-colors, 'primary') !default;
$secondary: #FFF !default;
  • URL: /components/raw/link/_variables.scss
  • Filesystem Path: src/components/link/_variables.scss
  • Size: 81 Bytes

Link

A link widget provides an interactive reference to a resource. The target resource can be either external or local, i.e., either outside or within the current page or application.

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import '../../node_modules/@verndale/front-end-components/lib/link/styles';

Copy and paste to your project any of the markup in the link variations - you can find the markup in the HTML tab.

Styling

The component will already have a default style/theme set, so it will work out of the box. The alert has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.

Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss

// Primary - light background
$primary
// Secondary - dark background
$secondary

You always need to set your overrides before the import of you component - for example:

$primary: #808080;
$secondary: #101010;

@import '../../node_modules/@verndale/front-end-components/lib/link/styles';