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 .

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.

Simple Link

The recommended HTML for writing anchor link is:

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

This will render as:

Link Styling

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:

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>