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