Link

Color #

Superkube generates color classes for links that are defined in the $colors map. For example this is specified by default:

$colors: (
    ...
    link: (
        default: (
            base: palette(active, dark),
            hover: palette(negative, dark)
        ),
        dark: (
            base: palette(black),
            hover: rgba(palette(black), 0.6)
        ),
        moderated: (
            base: rgba(palette(black), .7),
            hover: palette(black)
        ),
        light: (
            base: palette(white),
            hover: rgba(palette(white), .6)
        ),
        light-moderated: (
            base: rgba(palette(white), .7),
            hover: palette(white)
        )
    )
    ...
);

As a result, such classes will be generated:

• link-dark
• link-moderated
• link-light
• link-light-moderated

<a href="#" class="link-dark">...</a>
<a href="#" class="link-moderated">...</a>
<a href="#" class="link-light">...</a>
<a href="#" class="link-light-moderated">...</a>

Note that no class is created for the default color since this color is used to specify the link color without the class. This variable must be in your $colors map.

// default color
<a href="#">...</a>

Custom link color

Add a variable to the $colors map to create a link with your color:

$colors: (
    ...
    link: (
        positive: (
            base: palette(positive, dark),
            hover: palette(positive, darker)
        )
    )
    ...
);

In this case Superkube will generate a class link-positive with the specified color.

<a href="#" class="link-positive">...</a>

Stretched #

Use link-stretched to set the link to the full height and width of the element.

<div class="item">
    <div class="item-head">...</div>
    <div class="item-body">
        <a href="#" class="link-stretched">...</a>
    </div>
</div>

The element must have a position: relative property so that the link does not go beyond it. You can do it in SCSS:

.item {
    position: relative;
}

Another way to do this is to use the module Position and its class relative:

<div class="item relative">
    <div class="item-head">...</div>
    <div class="item-body">
        <a href="#" class="link-stretched">...</a>
    </div>
</div>

Underline #

Use the link-underline class to make the link underlined.

<h2>
    <a href="#" class="link-underline">...</a>
</h2>

Use the link-underline-off class to turn off link underlining.

<a href="#" class="link-underline-off">...</a>