Components

Tags

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

Import

@import 'settings-tools/_all-settings';
@include import-font-families();
@import 'components/_c.tag';

Available types of tags

  • text
  • link
  • selectable
  • removable

Each tag type requires a different dom structure and classes names. Each tag type comes in 2 sizes and with a dark color scheme.

The text tag

Apply the mc-tag-text to a non-clickable element, like a p, a div or a span element, and wrap the label inside a span with a mc-tag-text__label class.

Available modifiers :

  • m (default size): mc-tag-text--m
  • s : mc-tag-text--s
  • dark : mc-tag-text--dark
Viewport: px 
<div class="example">
  <div class="example__item">
    <span class="mc-tag-text">
      <span class="mc-tag-text__label">
        text
      </span>
    </span>
  </div>
  <div class="example__item">
    <span class="mc-tag-text mc-tag-text--s">
      <span class="mc-tag-text__label">
        text small
      </span>
    </span>
  </div>
  <div class="example__item example__item--dark">
    <span class="mc-tag-text mc-tag-text--dark">
      <span class="mc-tag-text__label">
        text dark
      </span>
    </span>
  </div>
  <div class="example__item example__item--dark">
    <span class="mc-tag-text mc-tag-text--s mc-tag-text--dark">
      <span class="mc-tag-text__label">
        text small dark
      </span>
    </span>
  </div>
</div>

Apply the mc-tag-link to a a element, and wrap the label inside a span span with a mc-tag-link__label class. It is the same as the text tag but with hover, active and focus behavior.

Available modifiers :

  • m (default size): mc-tag-link--m
  • s : mc-tag-link--s
  • dark : mc-tag-link--dark
<a href="#" class="mc-tag-link">
  <span class="mc-tag-link__label">
    link
  </span>
</a>
Viewport: px 
<div class="example">
  <div class="example__item">
    <a href="#" class="mc-tag-link">
      <span class="mc-tag-link__label">
        link
      </span>
    </a>
  </div>
  <div class="example__item">
    <a href="#" class="mc-tag-link mc-tag-link--s">
      <span class="mc-tag-link__label">
        link small
      </span>
    </a>
  </div>
  <div class="example__item example__item--dark">
    <a href="#" class="mc-tag-link mc-tag-link--dark">
      <span class="mc-tag-link__label">
        link dark
      </span>
    </a>
  </div>
  <div class="example__item example__item--dark">
    <a href="#" class="mc-tag-link mc-tag-link--s mc-tag-link--dark">
      <span class="mc-tag-link__label">
        link small dark
      </span>
    </a>
  </div>
</div>

The selectable tag

The selectable tag is based on a checkbox and his associated label.

Available modifiers :

  • m (default size): mc-tag-selectable--m
  • s : mc-tag-selectable--s
  • dark : mc-tag-selectable--dark

You can disable the selectable tag using a disabled attribute on the input

<span class="mc-tag-selectable">
  <input
    class="mc-tag-selectable__input"
    type="checkbox"
    name=""
    id="selectable"
  />
  <label class="mc-tag-selectable__pill" for="selectable">
    <span class="mc-tag-selectable__label">
      selectable
    </span>
  </label>
</span>
Viewport: px 
<div class="example">
  <div class="example__item">
    <span class="mc-tag-selectable">
      <input
        class="mc-tag-selectable__input"
        type="checkbox"
        name=""
        id="selectable"
      />
      <label class="mc-tag-selectable__pill" for="selectable">
        <span class="mc-tag-selectable__label">
          selectable
        </span>
      </label>
    </span>
  </div>
  <div class="example__item">
    <span class="mc-tag-selectable">
      <input
        class="mc-tag-selectable__input"
        type="checkbox"
        disabled
        name=""
        id="selectable-disabled"
      />
      <label class="mc-tag-selectable__pill" for="selectable-disabled">
        <span class="mc-tag-selectable__label">
          selectable disabled
        </span>
      </label>
    </span>
  </div>


  <div class="example__item">
    <span class="mc-tag-selectable mc-tag-selectable--s">
      <input
        class="mc-tag-selectable__input"
        type="checkbox"
        name=""
        id="selectable-small"
      />
      <label class="mc-tag-selectable__pill" for="selectable-small">
        <span class="mc-tag-selectable__label">
          selectable small
        </span>
      </label>
    </span>
  </div>
  <div class="example__item example__item--dark">
    <span class="mc-tag-selectable mc-tag-selectable--dark">
      <input
        class="mc-tag-selectable__input"
        type="checkbox"
        name=""
        id="selectable-dark"
      />
      <label class="mc-tag-selectable__pill" for="selectable-dark">
        <span class="mc-tag-selectable__label">
          selectable dark
        </span>
      </label>
    </span>
  </div>
  <div class="example__item example__item--dark">
    <span class="mc-tag-selectable mc-tag-selectable--dark">
      <input
        class="mc-tag-selectable__input"
        type="checkbox"
        disabled
        name=""
        id="selectable-dark-disabled"
      />
      <label class="mc-tag-selectable__pill" for="selectable-dark-disabled">
        <span class="mc-tag-selectable__label">
          selectable dark disabled
        </span>
      </label>
    </span>
  </div>
  <div class="example__item example__item--dark">
    <span
      class="mc-tag-selectable mc-tag-selectable--s mc-tag-selectable--dark"
    >
      <input
        class="mc-tag-selectable__input"
        type="checkbox"
        name=""
        id="selectable-small-dark"
      />
      <label class="mc-tag-selectable__pill" for="selectable-small-dark">
        <span class="mc-tag-selectable__label">
          selectable small dark
        </span>
      </label>
    </span>
  </div>
</div>

The removable tag

The removable tag is a tag with a button dedicated to remove the tag.

Available modifiers :

  • m (default size): mc-tag-removable--m
  • s : mc-tag-removable--s
  • dark : mc-tag-removable--dark
<span class="mc-tag-removable">
  <span class="mc-tag-removable__label">
    removable
  </span>
  <button class="mc-tag-removable__remove">
    <span class="mc-tag-removable__remove-text">
      Delete tag
    </span>
  </button>
</span>
Viewport: px 
<div class="example">
  <div class="example__item">
    <span class="mc-tag-removable">
      <span class="mc-tag-removable__label">
        removable
      </span>
      <button
        class="mc-tag-removable__remove"
      >
        <span class="mc-tag-removable__remove-text">
          Delete tag
        </span>
      </button>
    </span>
  </div>
  <div class="example__item">
    <span class="mc-tag-removable mc-tag-removable--s">
      <span class="mc-tag-removable__label">
        removable
      </span>
      <button
        class="mc-tag-removable__remove"
      >
        <span class="mc-tag-removable__remove-text">
          Delete tag
        </span>
      </button>
    </span>
  </div>
  <div class="example__item example__item--dark">
    <span class="mc-tag-removable  mc-tag-removable--dark">
      <span class="mc-tag-removable__label">
        removable
      </span>
      <button
        class="mc-tag-removable__remove"
      >
      <span class="mc-tag-removable__remove-text">
        Delete Tag
      </span>
      </button>
    </span>
  </div>
  <div class="example__item example__item--dark">
    <span
      class="
        mc-tag-removable
        mc-tag-removable--dark
        mc-tag-removable--s"
    >
      <span class="mc-tag-removable__label">
        removable
      </span>
      <button
        class="mc-tag-removable__remove"
      >
        <span class="mc-tag-removable__remove-text">
          Delete tag
        </span>
      </button>
    </span>
  </div>
</div>

The tag list

Use a ul > li structure with the mc-tag-list classes to create a tag list.

<ul class="mc-tag-list">
  <li class="mc-tag-list__item">
    ... tag 1
  </li>
  <li class="mc-tag-list__item">
    ... tag 2
  </li>
</ul>
Viewport: px 
<div class="example">
  <ul class="mc-tag-list">
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          name=""
          id="selectable-1"
        />
        <label class="mc-tag-selectable__pill" for="selectable-1">
          <span class="mc-tag-selectable__label">
            Lorem
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          checked
          name=""
          id="selectable-2"
        />
        <label class="mc-tag-selectable__pill" for="selectable-2">
          <span class="mc-tag-selectable__label">
            ipsum
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          name=""
          id="selectable-3"
        />
        <label class="mc-tag-selectable__pill" for="selectable-3">
          <span class="mc-tag-selectable__label">
            dolor sit
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          name=""
          id="selectable-4"
        />
        <label class="mc-tag-selectable__pill" for="selectable-4">
          <span class="mc-tag-selectable__label">
            amet
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          checked
          name=""
          id="selectable-5"
        />
        <label class="mc-tag-selectable__pill" for="selectable-5">
          <span class="mc-tag-selectable__label">
            fluctuat
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          checked
          name=""
          id="selectable-6"
        />
        <label class="mc-tag-selectable__pill" for="selectable-6">
          <span class="mc-tag-selectable__label">
            consectetur
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          disabled
          name=""
          id="selectable-7"
        />
        <label class="mc-tag-selectable__pill" for="selectable-7">
          <span class="mc-tag-selectable__label">
            adipisicing
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          name=""
          id="selectable-8"
        />
        <label class="mc-tag-selectable__pill" for="selectable-8">
          <span class="mc-tag-selectable__label">
            elit
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          disabled
          name=""
          id="selectable-9"
        />
        <label class="mc-tag-selectable__pill" for="selectable-9">
          <span class="mc-tag-selectable__label">
            quis
          </span>
        </label>
      </span>
    </li>
    <li class="mc-tag-list__item">
      <span class="mc-tag-selectable">
        <input
          class="mc-tag-selectable__input"
          type="checkbox"
          name=""
          id="selectable-10"
        />
        <label class="mc-tag-selectable__pill" for="selectable-10">
          <span class="mc-tag-selectable__label">
            aperiam
          </span>
        </label>
      </span>
    </li>
  </ul>
</div>