Vebego Component Library

Tag: Featured 

<div class="atm-tag tag-featured" href="#">
    <span>
        uitgelicht
    </span>
</div>
 
<{{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": "div",
  "type": "",
  "title": "",
  "href": "#",
  "target": "",
  "id": "",
  "text": "uitgelicht",
  "modifier": "tag-featured",
  "hasCloseIcon": false,
  "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;
    }

    &.tag-featured {
        @apply bg-links text-white border-none rounded-lg text-sm font-display font-medium;
    }

    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: 625 Bytes

No notes defined.