Vebego Component Library
<a class="atm-tag tag-sm" title="This is a tag link" href="#">
    <span>
        This is a tag link
    </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 a tag link",
  "href": "#",
  "target": "",
  "id": "",
  "text": "This is a tag link",
  "modifier": "tag-sm",
  "hasCloseIcon": false,
  "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.