JSPM

@spectrum-web-components/link

0.3.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4373
  • Score
    100M100P100Q125889F
  • License Apache-2.0

Package Exports

  • @spectrum-web-components/link

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@spectrum-web-components/link) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Description

An sp-link allow users to navigate to a different location. They can be presented in-line inside a paragraph or as a standalone text.

Installation

npm install @spectrum-web-components/link

# or

yarn add @spectrum-web-components/link

Example

This is an <sp-link href="#">example link</sp-link>.

Variants

Standard links can follow any of the character styles defined in Spectrum. Therefore, they can be displayed in various font sizes and weights. Standard links appear blue, in order to stand out from the rest of the text and be recognized as interactive.

This is a <sp-link href="#">standard link</sp-link>.

Quiet links appear with an underline and use the default text color. The subdued appearance is optimal for use in content lower in your application’s hierarchy such as links in a footer.

This is a <sp-link quiet href="#">quiet link</sp-link>.

When a link needs to be placed on top of a colored background or a visual, use the over background link. This link uses a white opaque color instead of a blue color and stands out from the rest of the text with the addition of an underline.

<div
    style="background-color: rgb(255, 160, 175); padding: 15px 20px; display: inline-block;"
>
    <p style="color: rgb(240, 240, 240);">
        This
        <sp-link over-background href="#">link</sp-link>
        is over a background.
    </p>
</div>

Download attribute

The download attribute on an html<a> tag prompts a user to download a link as opposed to navigating to it. This attribute has simply been carried forward to html<sp-link> to function the same.

While it functions this way without assigning a value, actually assigning the value allows custom naming of the download link in accordance with normal html<a> rules defined by the browser.

This is a <sp-link download="myfile.txt" href="#">download link</sp-link>.

Accessibility

Links are accessible by default, rendered in HTML using the <a> element. The correct aria roles will automatically be applied.