anchor Component

Anchor component is the HTML hyperlinks for directing user to from the current webpage to another. This component is the currency for seach engine optimization to have inference control. Bissetii styles this component seemlessly.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass scripts responsible for styling link are located at:

assets/css/bissetii/modules/core/_Link.scss
assets/css/bissetii/modules/core/_Button.scss

_Link.scss is reponsible for basic link styling like the primary colored underline.

_Button.scss is responsible for styling link into a button-like object instead of the conventional link. See Button Component .

Javascript Parts

This component does not depend on any Javascript.

HTML Parts

Bissetii takes over the bottom underline and replaced it with a styled bottom border with primary color.

The recommended HTML for writing anchor link is:

<a href="#">simple link</a>

This will render as:

simple link

For the cases where HTML styling tag is applied, Bissetii recommends bold and italic but NOT underline. This is because underline is conflicting with the styled bottom border, producing an undesired outcome. The HTML are:

<b><a href="#">bolded link</a></b>
<i><a href="#">italic link</a></i>

This will render as:

bolded link

italic link

NOTE: This is an expected underline link

Clean Wrap

By default, Bissetii’s link has a border-bottom underline styling. This is not feasible when you wrap the anchor link on solid objects like images. Hence, you need to append wrap class tag to remove the said underline effect. Example:

<b><a class="wrap" href="#">bolded link</a></b>
<i><a class="wrap" href="#">italic link</a></i>

bolded link

italic link