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>