Link¶

Use link element for linking a URL anywhere on the page. We support different sizes and colours.

Examples¶

Storefront theme provides predefined stylings for two links those are: primary and secondary links.

HTML

<a class="link">Primary</a>
<a class="link link_secondary">Secondary</a>

Link tags¶

The .link classes where designed to be used with <a> elements. However, you can use them with any element. Eg. <div> or <span>. You should remeber to add appropriate attribute to such elements role="link" to tell assistive technologies such as screen readers what purpose the element serves.

Disabled state¶

Each link may be disabled. Styles make links look visually disabled and unclickable. To make them disabled, add link_disabled class to the button and aria-disabled="true" attribute.

Primary disabled Secondary disabled

HTML

<a class="link link_disabled" aria-disabled="true">Primary disabled</a>
<a class="link link_secondary link_disabled" aria-disabled="true">Secondary disabled</a>

No underline¶

You can configure any link to have no underline by default. You can do it by adding the link_no-underline class to it.

Primary no underline Secondary no underline

HTML

<a class="link link_no-underline"">Primary no underline</a>
<a class="link link_secondary link_no-underline"">Secondary no underline</a>

LESS¶

You can modify any link less variable in your User Less section to change link styles.

Links variables¶

Variables used to style links.

@linkColorPrimary: @primaryColor;
@linkColorPrimaryHover: darken(@linkColorPrimary, 20%);
@linkColorPrimaryActive: darken(@linkColorPrimary, 40%);

@linkColorSecondary: @globalFontColorSecondary;
@linkColorSecondaryHover: @globalFontColor;
@linkColorSecondaryActive: @globalFontColor;

@linkColorRegular: @globalFontColor;
@linkColorRegularHover: @primaryColors700;
@linkColorRegularActive: @primaryColors900;

@linkColorDisabled: @neutralColors400;

@linkFontSizeInPxM: @fontSizeInPxM;
@linkLineHeightInPxM: @lineHeightInPxM;

If you want to change link styles, you can just change the variables. To change default font-size just modify @linkFontSizeInPxM variable.

@linkFontSizeInPxM: 20px;

To change primary link look:

@linkColorPrimary: #00ff00;
@linkColorPrimaryHover: #ffff00;
@linkColorPrimaryActive: #ff0000;

Links mixins¶

Those mixins are used to create link variants.

.link-decorate-appearance (@color: @linkColorPrimary, @colorHover: @linkColorPrimaryHover, @colorActive: @linkColorPrimaryActive) {
    color: @color;

    &:hover {
        color: @colorHover;
    }

    &:active {
        color: @colorActive;
    }
}

If you want to create tertiary variant you can use mixins .link-decorate-appearance (You have to provide those variables)

.link {
    &_tertiary {
        .link-decorate-appearance(@linkColorTertiary, @linkColorTertiaryHover, @linkColorTertiaryActive);
    }
}

or create nav link variant.

.link {
    &_nav {
        .link-decorate-appearance(@linkColorNav, @linkColorNavHover, @linkColorNavActive);
    }
}

Links styles¶

Here are standard links styles.

a,
.link {
    .link-decorate-appearance();
    text-decoration: underline;

    width: fit-content;

    cursor: pointer;

    &:hover {
        text-decoration: none;
    }

    &_secondary {
        .link-decorate-appearance(@linkColorSecondary, @linkColorSecondaryHover, @linkColorSecondaryActive);
    }

    &_regular {
        .link-decorate-appearance(@linkColorRegular, @linkColorRegularHover, @linkColorRegularActive);
    }

    &_disabled {
        .link-decorate-appearance(@linkColorDisabled, @linkColorDisabled, @linkColorDisabled);
        text-decoration: none;
        pointer-events: none;
    }

    &_no-underline {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    &_with-icon {
        display: inline-flex;
        align-items: center;
        column-gap: @globalSpacing * 0.5;
    }
}