Vebego Component Library

Tag 

<!-- Link -->
<a class="atm-tag " title="This is a tag link" href="#">
    <span>
        This is a tag link
    </span>
</a>


<!-- Link Active -->
<a class="atm-tag active" title="This is an active tag link" href="#">
    <span>
        This is an active tag link
        <span class="atm-icon  fal fa-times   "></span>
    </span>
</a>


<!-- Link Sm -->
<a class="atm-tag tag-sm" title="This is a tag link" href="#">
    <span>
        This is a tag link
    </span>
</a>


<!-- Link Sm Active -->
<a class="atm-tag tag-sm active" title="This is an active tag link" href="#">
    <span>
        This is an active tag link
        <span class="atm-icon  fal fa-times   "></span>
    </span>
</a>


<{{element}}
  class="atm-tag {{modifier}}"
  {{#if type}}type="{{type}}"{{/if}}
  {{#if title}}title="{{title}}"{{/if}}
  {{#if href}}href="{{href}}"{{/if}}
  {{#if target}}target="{{target}}"{{/if}}
  {{#if id}}id="{{id}}"{{/if}}>
  <span>
    {{text}}
    {{#if hasCloseIcon}}
        {{render '@icon' closeIcon}}
    {{/if}}
  </span>
</{{element}}>
 
/* Link */
{
  "element": "a",
  "type": "",
  "title": "This is a tag link",
  "href": "#",
  "target": "",
  "id": "",
  "text": "This is a tag link",
  "modifier": "",
  "hasCloseIcon": false,
  "closeIcon": {
    "style": "fal",
    "icon": "fa-times"
  }
}


/* Link Active */
{
  "element": "a",
  "type": "",
  "title": "This is an active tag link",
  "href": "#",
  "target": "",
  "id": "",
  "text": "This is an active tag link",
  "modifier": "active",
  "hasCloseIcon": true,
  "closeIcon": {
    "style": "fal",
    "icon": "fa-times"
  }
}


/* Link Sm */
{
  "element": "a",
  "type": "",
  "title": "This is a tag link",
  "href": "#",
  "target": "",
  "id": "",
  "text": "This is a tag link",
  "modifier": "tag-sm",
  "hasCloseIcon": false,
  "closeIcon": {
    "style": "fal",
    "icon": "fa-times"
  }
}


/* Link Sm Active */
{
  "element": "a",
  "type": "",
  "title": "This is an active tag link",
  "href": "#",
  "target": "",
  "id": "",
  "text": "This is an active tag link",
  "modifier": "tag-sm active",
  "hasCloseIcon": true,
  "closeIcon": {
    "style": "fal",
    "icon": "fa-times"
  }
}
  • Content: 
    .atm-tag {
    @apply inline-block;
    @apply bg-gray-100;
    @apply rounded-full;
    @apply px-4 py-2;
    @apply align-middle;

    &.active {
        @apply bg-cta text-white;
    }

    &.tag-sm {
        @apply py-1.5;
        @apply text-sm;
    }

    span {
        @apply flex;
        @apply items-center;
    }

    .atm-icon {
        @apply ml-3;
    }
}

a.atm-tag {
    @apply cursor-pointer;

    &:hover {
        @apply bg-cta text-white;
    }
}
  • URL: /components/raw/tag/tag.css
  • Filesystem Path: src\components\02-atoms\tag\tag.css
  • Size: 501 Bytes

No notes defined.