Modules
Link
This module helps to work with links.
Usage #
Superkube has several link colors by default.
<a href="#">Default Link</a>
<a href="#" class="link-primary">Primary Link</a>
<a href="#" class="link-dark">Dark Link</a>
<a href="#" class="link-muted">Muted Link</a>
<a href="#" class="link-moderated">Moderated Link</a>
<a href="#" class="link-light">Light Link</a>
<a href="#" class="link-light-moderated">Light Moderated Link</a>
You can change the color of link or add your own color.
// change
.link-muted {
--link-color: var(--palette-black-40);
}
// add
.link-important {
--link-color: var(--palette-negative-base);
--link-hover-color: var(--palette-negative-black);
}
In the example above, the muted link will become more muted.
Also, the new important link color will be added.
<a href="#" class="link-important">Important Link</a>
Icon
The SVG icon will inherit the color of the link if it is placed in the span tag with the icon class.
<a href="#">
<span class="icon-text">
<svg...></svg>
</span>
Default Link
</a>
<a href="#" class="link-dark">
<span class="icon-text">
<svg...></svg>
</span>
Dark Link
</a>
<a href="#" class="link-muted">
<span class="icon-text">
<svg...></svg>
</span>
Muted Link
</a>
<a href="#" class="link-light">
<span class="icon-text">
<svg...></svg>
</span>
Light Link
</a>
Helpers #
Links have several helper classes that make it easier to change some of their properties.
Weight
The link-strong class makes the link bold, and the link-semibold class sets font-weight: 600.
So if the project font has this typeface, the link will be semibold.
<a href="#" class="link-strong">Strong Link</a>
<a href="#" class="link-semibold">Semibold Link</a>
Italic
The link-italic class makes the link italic.
<a href="#" class="link-italic">Italic Link</a>
Block
The link-block class sets the display: block property for the link.
This is handy when you want to expand the clickable area of the link.
<a href="#" class="link-block">Block Link</a>
Underline
The link-underline class makes an underline if the link did not have it.
The link-underline-off class turns off the underline of the link.
<h3><a href="#" class="link-underline">Heading Link</a></h3>
<a href="#" class="link-underline-off">Underline Off</a>
Ghost
The link-ghost helper disables the underline for the link, but unlike link-underline-off leaves it on the hover.
<a href="#" class="link-ghost">Ghost Link</a>
<a href="#" class="link-dark link-ghost">Ghost Dark Link</a>
Stretched
Use link-stretched to set the link to the full height and width of the element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="card bg-light sh-150 p-8">
<div class="card-head">
<h2 class="heading-medium">
<a href="#" class="link-stretched">...</a>
</h2>
</div>
<div class="card-body mt-2">
<p class="text-medium text-moderated">...</p>
</div>
</div>
The parent element must have the position: relative property so that the link does not go beyond it.
If the element does not have that property, it can be set using the Position module.
<div class="position-relative">
<a href="#" class="link-stretched">Link</a>
</div>