← Superkube / Documentation 2.1.1
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 by extending $colors. See also how to work with colors for modules.


// =Colors
$colors: map-extend($colors, (
    link: (
        muted: (
            base: (
                color: palette(black-o, 40)
            ),
            hover: (
                color: palette(black)
            )
        ),
        important: (
            base: (
                color: palette(negative, base)
            ),
            hover: (
                color: palette(black)
            )
        )
    )
));

In the example above, the muted link will become more muted. Also, the new important link color will be added.

Superkube will automatically create a link-important class specified in $colors.


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