Tags

Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them. Clickable tags insert the text of the clicked item into the search field or perform other actions.

Examples

Generally, we have to type of tags:

• Action tags: they don't have tag classes but they do look like tags. After clicking, they perform some action.
• State tags: they inform user about the state, these tags are not clickable.

Actions tags (with icons)

Action tags are clickable and leads user to one of the following actions:

• Opening external link: they have the icon and contain the profile-link class.
  Eventival

  <span class="profile-link profile-link--company"><a href="#">Eventival</a></span>

• Searching for a word that is included in the tag: they have the icon and contain the searchable class. Searchable items acts like links but they are in fact span elements. Once clicked, they insert the text of the clicked item into the main search field (text visible in the search field starts with the search prefix).
  VIP VIP Approved Rejected

    <span class="searchable"><span data-searchable-prefix="prefix" data-searchable-string="value">VIP</span></span>
    <span class="searchable bg-custom-light"><span data-searchable-prefix="prefix" data-searchable-string="value">VIP</span></span>
    <span class="searchable bg-success-dark tw"><span data-searchable-prefix="prefix" data-searchable-string="value">Approved</span></span>
    <span class="searchable bg-warning-dark tw"><span data-searchable-prefix="prefix" data-searchable-string="value">Rejected</span></span>

In the tag editor component, both searchable items and profile links that go to the profile have additional classes and icons. Deletable links and searchable items can be deleted by clicking the X icon.

VIP

<div class="ta-r">
  <div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span>VIP</span></span><i class="fal fa-times deletable"></i></div>
</div>

Draggable links and searchable items can be moved by drag and drop by using the arrows icon. It is especially useful when user has a lot of them and wants to move the most important ones to the beginning of the section.

newsletter

<div class="ta-r">
  <div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span><i class="fal fa-arrows draggable"></i>newsletter</span></span></div>
</div>

Private an public (shared) tags

We use it, for example, in People / Tags, where we need to differentiate the public (shared) tags visible for everyone and private tags that should be visible only to the user that created them. Both public and private tags are placed in the two separate containers card__content__block. Private tags should have a title with the word "Private:" before the content of the tag.

 <div class="card__content max-height-scroll--135">
    <div class="card__content__block">
      <span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix"
        data-searchable-string="value"><span>VIP</span></span>
      <span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix"
        data-searchable-string="value"><span>newsletter</span></span>
      <span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix"
        data-searchable-string="value"><span>Eventival management</span></span>
    </div>
    <div class="card__content__block">
      <span class="searchable tag-private" data-searchable-prefix="prefix" data-searchable-string="value" title="Private: never never never invite again!"><span>never never never invite again!</span></span>
      <span class="searchable tag-private" data-searchable-prefix="prefix" data-searchable-string="value" title="Private: no way!"><span>no way!</span></span>
      <span class="searchable tag-private" data-searchable-prefix="prefix" data-searchable-string="value" title="Private: forget it"><span>forget it</span></span>
    </div>
  </div>

State tags (without icons)

State tags are not clickable and does not cause any action. They are just informing about the state. They have a .tag--label class. For tags with no background, use .tag--labels and the bg-... color class that is the same as the color of the container background.

  <span class="tag tag--label bg-default-light">Invited by email</span>
  <span class="tag tag--label bg-default-dark tw">Invited by email</span>
  <span class="tag tag--label bg-custom-light">Invited by phone</span>
  <span class="tag tag--label bg-custom-dark tw">Invivited by phone</span>
  <span class="tag tag--label bg-info-light">Approved</span>
  <span class="tag tag--label bg-info-dark tw">Approved</span>
  <span class="tag tag--label bg-success-light">Yes</span>
  <span class="tag tag--label bg-success-dark tw">Yes</span>
  <span class="tag tag--label bg-warning-light">No</span>
  <span class="tag tag--label bg-warning-dark tw">No</span>
  <span class="tag tag--label bg-white">Peter Smith</span>

Design Guideline

Structure

All tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 3px radius.