Vebego Component Library

Tag: 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
        <i class="atm-icon  fal fa-times   "></i>

    </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}}>
 
{
  "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 border-gray-100 border;
    @apply rounded-full;
    @apply px-4 py-2;
    @apply transition;

    &:hover{
        @apply border-secondary-col-1 text-secondary-col-1;
    }
        
    &.active {
        @apply bg-secondary-col-1 text-white border-none;
    }

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

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

a.atm-tag {
    @apply cursor-pointer;
}
  • URL: /components/raw/tag/tag.css
  • Filesystem Path: src\components\02-atoms\tag\tag.css
  • Size: 508 Bytes

No notes defined.