Skip to main content

Links

Links are elements that take a user from one webpage to another. These are often found inline with regular text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, quae.

Usage​

HTML​

<a href="#" class="hs-link">Link.</a>

SCSS/CSS​

@use 'node_modules/@devprotocol/hashi';
@use 'node_modules/@devprotocol/hashi/hs-link';

@include hashi.init {
  @include hs-link.render();
}

API​

CSS Classes​

These are used to structure, extend, and modify the styles of a component on the markup.

Anatomical Classes​

These classes make up the elements inside a component.

ClassEffect
.hs-linkMain link component class.

Custom Properties​

These are for creating your own component theme classes that you can append to the parent element markup.

PropertyEffect
--hs-link-fillChanges the link's background color.
--hs-link-inkChanges the link's text color.
--hs-link-borderChanges the link's border color.

Example​

.my-link-theme {
  --hs-text-field-ink: lime;
}

Configuring styles​

Here are all the themeable properties for this component. The directions to use these properties are located in the render API.

$ink: 'accent-400' !default;

Extending styles​

If you wish to extend the component styles, the extend() API might come in handy.