# Link

# Most common usage scenario

<template>
  <SfLink target="_blank" :link="link">
    Check this out!
  </SfLink>
</template>
<script>
import { SfLink } from "@storefront-ui/vue";
export default {
  components: {
    SfLink,
  },
  data() {
    return {
      link: "https://www.storefrontui.io/",
    };
  },
};
</script>

# Props

  • link
    • Page route
    • type: string|object
    • defaultValue: ""

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --link-color
  • --link-font
  • --link-font-weight
  • --link-font-size
  • --link-font-line-height
  • --link-font-family
  • --link-text-decoration
  • --c-link

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.