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-dark-medium">Dark Medium Link</a>
<a href="#" class="link-light">Light Link</a>
<a href="#" class="link-light-medium">Light Medium Link</a>

You can change the color of link or add your own color by extending $colors map.


// =Colors
$colors: map-extend($colors, (
    muted: (
        muted: (
            color: var(--palette-black-40)
        ),
        important: (
            color: var(--palette-red-base),
            hover-color: var(--palette-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

Use the link-icon modifier to place icon inside the link. The SVG icon will inherit the color of the link if it is placed in the span tag with the icon class.


<a href="#" class="link-icon">
    Link
    <span class="icon icon-16">
        <svg...></svg>
    </span>
</a>

The link-icon modifier makes the display: flex inside the link and sets the gap for the spacing between the icon and the link text. By default, it's 4px. You can change it with css variable:


.link-icon {
    --link-icon-space: 6px;
}

Size #

The link text size modifiers repeat the same scale as in the Text module.


<a href="#" class="link link-huge">...</a>
<a href="#" class="link">...</a>
<a href="#" class="link link-small">...</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 shadow-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 helper.


<div class="position-relative">
    <a href="#" class="link-stretched">Link</a>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// colors
--link-color: {color-value};
--link-hover-color: {color-value};
--link-border-color: transparent;
--link-hover-border-color: transparent;
--link-background-color: transparent;
--link-hover-background-color: transparent;

// params
--link-icon-space: 4px;