@rei/cdr-link

CdrLink

For the most up-to-date information, see REI Cedar documentation.

Properties

tag	string	'a'
name	type	default

Sets valid HTML element tag. Possible values: { ‘a’ | ‘button’ }

modifier	string	N/A
name	type	default

Modifies the style variant for this component. Possible values: { ‘standalone’ }

href	string	"#”
name	type	default

Sets URL to cdr-link href property. The tag prop requires value of <a>

Slots

default
name
Sets the innerHTML for cdr-link. This includes text and html markup

Installation

Resources are available within the cdrLink package:

• Component: @rei/cdr-link
• Component styles: cdr-link.css

To incorporate the required assets for a component, use the following steps:

1. Install using NPM

Install the cdrLink package using npm in your terminal:

Terminal

    npm i -s @rei/cdr-link

2. Import dependencies

main.js

// import your required css.
import "@rei/cdr-link/dist/cdr-link.css";

// If your link will display an icon ensure you also include the icon’s css file.
import "@rei/cdr-link/dist/cdr-icon.css";

3. Add component to a template

local.vue

<template>
...
    <cdr-link href="rei.com">Ten Essentials.</cdr-link>
...
</template>

<script>
import { CdrLink } from '@rei/cdr-link';
export default {
  ...
  components: {
     CdrLink  
  }
}
</script>

Usage

By default, the component renders using an anchor element and requires an href attribute or tag to render a valid accessible link.

  <cdr-link href="http://rei.com">
    Visit REI
  </cdr-link>

Use the tag prop to render the link as a <button> element that presents a link appearance without an href attribute.

  <cdr-link tag="button">
    Show Details
  </cdr-link>

Style Modifiers

To effect the visual presentation pass the following variants to the modifier attribute of the cdrLink component.

• Standalone: Include as an independent call to action to expand content, remove filters, or provide additional information