Components

Links

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
freemarker
:Ready
webComponent
:Ready

Import

Import the settings and the links scss files.

@import 'settings-tools/all-settings';
@import 'components/_c.links';

Basic usage

To create a link you have one main class to apply mc-link.

<a href="#" class="mc-link">Default link</a>
Viewport: px
<div class="example">
<a href="#" class="mc-link">Default link</a>
</div>

Variations

Available color themes

  • dark (default): mc-link
  • light: mc-link--light
  • primary: mc-link--primary
  • primary-02: mc-link--primary-02 (no longer maintened)
  • danger: mc-link--danger
Viewport: px
<div class="example">
<a href="#" class="mc-link"> Default link </a>
</div>
<div class="example">
<a href="#" class="example__bg-dark mc-link mc-link--light"> Light link </a>
</div>
<div class="example">
<a href="#" class="mc-link mc-link--primary"> Primary link </a>
</div>
<div class="example">
<a href="#" class="mc-link mc-link--danger"> Danger link </a>
</div>

Available sizes

You can use one of the 2 available sizes :

  • small : mc-link--s
  • medium : mc-link--m
<a href="#" class="mc-link mc-link--s">Small link navigation link</a>
<a href="#" class="mc-link mc-link--m">Medium link navigation link</a>
Viewport: px
<div class="example">
<a href="#" class="mc-link mc-link--s">
Small link
</a>
</div>
<div class="example">
<a href="#" class="mc-link mc-link--m">
Medium link
</a>
</div>

Icons possibilities

Positions

You can add an icon into a link in different ways :

  • On the left

    Viewport: px
    <div class="example">
    <a href="#" class="mc-link">
    <svg class="mc-link__icon">
    <use xlink:href="#icon" />
    </svg>
    link with icon left
    </a>
    </div>
    <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 16 16"
    style="display: none"
    >
    <symbol id="icon" viewBox="0 0 16 16">
    <path
    d="M10.5 14a1 1 0 0 1-.71-.29l-5-5a1 1 0 0 1 0-1.42l5-5a1 1 0 1 1 1.42 1.42L6.91 8l4.3 4.29a1 1 0 0 1 0 1.42 1 1 0 0 1-.71.29z"
    />
    </symbol>
    </svg>
  • On the right

    Viewport: px
    <div class="example">
    <a href="#" class="mc-link">
    link with icon right
    <svg class="mc-link__icon">
    <use xlink:href="#icon" />
    </svg>
    </a>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
    <symbol id="icon" viewBox="0 0 16 16">
    <path
    d="M5.5 14a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L9.09 8l-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 0 1.42l-5 5a1 1 0 0 1-.71.29z"
    />
    </symbol>
    </svg>
  • Icon only

    Using the class : mc-link__icon

Viewport: px
<div class="example">
<a href="#" class="mc-link">
<svg class="mc-link__icon">
<use xlink:href="#icon" />
</svg>
</a>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
style="display:none"
>
<symbol id="icon" viewBox="0 0 16 16">
<path
d="M10.5 14a1 1 0 0 1-.71-.29l-5-5a1 1 0 0 1 0-1.42l5-5a1 1 0 1 1 1.42 1.42L6.91 8l4.3 4.29a1 1 0 0 1 0 1.42 1 1 0 0 1-.71.29z"
/>
</symbol>
</svg>

Icon sizes

Link icons are only used in 16px regardless of the link size

Viewport: px
<div class="example">
<a href="#" class="mc-link mc-link--s">
<svg class="mc-link__icon">
<use xlink:href="#icon2" />
</svg>
Small link icon left
</a>
<a href="#" class="mc-link mc-link--s">
Small link icon right
<svg class="mc-link__icon">
<use xlink:href="#icon" />
</svg>
</a>
</div>
<div class="example">
<a href="#" class="mc-link">
<svg class="mc-link__icon">
<use xlink:href="#icon2" />
</svg>
Default link icon left
</a>
<a href="#" class="mc-link mc-link">
Default link icon right
<svg class="mc-link__icon">
<use xlink:href="#icon" />
</svg>
</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="icon" viewBox="0 0 16 16">
<path
d="M5.5 14a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L9.09 8l-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 0 1.42l-5 5a1 1 0 0 1-.71.29z"
/>
</symbol>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
style="display: none"
>
<symbol id="icon2" viewBox="0 0 16 16">
<path
d="M10.5 14a1 1 0 0 1-.71-.29l-5-5a1 1 0 0 1 0-1.42l5-5a1 1 0 1 1 1.42 1.42L6.91 8l4.3 4.29a1 1 0 0 1 0 1.42 1 1 0 0 1-.71.29z"
/>
</symbol>
</svg>

Responsive classes

Defaultmc-link--smc-link--m
From breakpoint mmc-link--s@from-mmc-link--m@from-m
From breakpoint lmc-link--s@from-lmc-link--m@from-l
From breakpoint xlmc-link--s@from-xlmc-link--m@from-xl
From breakpoint xxlmc-link--s@from-xxlmc-link--m@from-xxl

Behaviors

Standard input states :

  • hover
  • active
  • visited
  • disabled
Viewport: px
<div class="example">
<div class="example__col">
<h2 class="example__col-title">Hover</h2>
<a href="" class="example__item mc-link mc-link mc-link is-hover"> Link </a>
<a href="" class="example__item mc-link mc-link mc-link--light is-hover">
Link
</a>
<a href="" class="example__item mc-link mc-link mc-link--primary is-hover">
Link
</a>
<a href="" class="example__item mc-link mc-link mc-link--danger is-hover">
Link
</a>
</div>
<div class="example__col">
<h2 class="example__col-title">Active</h2>
<a href="" class="example__item mc-link mc-link mc-link is-active">
Link
</a>
<a href="" class="example__item mc-link mc-link mc-link--light is-active">
Link
</a>
<a href="" class="example__item mc-link mc-link mc-link--primary is-active">
Link
</a>
<a href="" class="example__item mc-link mc-link mc-link--danger is-active">
Link
</a>
</div>
<div class="example__col">
<h2 class="example__col-title">Visited</h2>
<a href="" class="example__item mc-link mc-link mc-link is-visited">
Link
</a>
<a href="" class="example__item mc-link mc-link mc-link--light is-visited">
Link
</a>
<a
href=""
class="example__item mc-link mc-link mc-link--primary is-visited"
>
Link
</a>
<a href="" class="example__item mc-link mc-link mc-link--danger is-visited">
Link
</a>
</div>
<div class="example__col">
<h2 class="example__col-title">Disabled</h2>
<span class="example__item mc-link mc-link mc-link is-disabled">
Link
</span>
<span class="example__item mc-link mc-link mc-link--light is-disabled">
Link
</span>
<span class="example__item mc-link mc-link mc-link--primary is-disabled">
Link
</span>
<span class="example__item mc-link mc-link mc-link--danger is-disabled">
Link
</span>
</div>
</div>

Mixins

If you need to create a new link theme you need to define a new SASS map, see below :

$my-map: (
'base': green,
'hover': white,
'visited': purple,
'active': blue,
);

Now the map of your theme is define you can use the mixin set--link-theme.

.mc-link--my-custom-theme {
@include set-link-theme($my-map);
}

Then, it will generate something like this :

.mc-link--my-custom-theme {
color: green;
}
.mc-link--my-custom-theme:hover,
.mc-link--my-custom-theme.is-hover {
color: white;
}
.mc-link--my-custom-theme:visited,
.mc-link--my-custom-theme.is-visited {
border-color: purple;
}
.mc-link--my-custom-theme:active,
.mc-link--my-custom-theme.is-active {
color: blue;
}