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.
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>