← Superkube / Documentation 2.6.1


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>


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">
    Default Link
<a href="#" class="link-dark">
    <span class="icon-text">
    Dark Link
<a href="#" class="link-muted">
    <span class="icon-text">
    Muted Link
<a href="#" class="link-light">
    <span class="icon-text">
    Light Link

Helpers #

Links have several helper classes that make it easier to change some of their properties.


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>


The link-italic class makes the link italic.

<a href="#" class="link-italic">Italic Link</a>


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>


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>


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>


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>
    <div class="card-body mt-2">
        <p class="text-medium text-moderated">...</p>

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>