Components

Links

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
Usage
Code
Specs
Design

Import

Import the settings and the links scss files.

@import 'settings-tools/_all-settings';


@include import-font-families();


@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
  • 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--primary-02">
    Primary-02 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

    Using the class : mc-link__icon--left

    Viewport: px 
    <div class="example">
      <a href="#" class="mc-link">
        <svg class="mc-link__icon mc-link__icon--left">
          <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

    Using the class : mc-link__icon--right

    Viewport: px 
    <div class="example">
      <a href="#" class="mc-link">
        link with icon right
        <svg class="mc-link__icon mc-link__icon--right">
          <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 mc-link__icon--left">
      <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 mc-link__icon--right">
      <use xlink:href="#icon" />
    </svg>
  </a>
</div>


<div class="example">
  <a href="#" class="mc-link">
    <svg class="mc-link__icon mc-link__icon--left">
      <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 mc-link__icon--right">
      <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--primary-02 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--primary-02 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--primary-02 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--primary-02 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;
}