Vebego Component Library

Tag Bubble 

<div class="mol-tag-bubble">
    <a class="atm-tag " title="This is a tag link" href="#">
        <span>
            Inspiratie
        </span>
    </a>

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

    <a class="atm-tag active" title="This is a tag link" href="#">
        <span>
            Mega Trends
            <i class="atm-icon  fal fa-times   "></i>

        </span>
    </a>

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

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

</div>
 
<div class="mol-tag-bubble">
    {{#each tags}}
        {{ render '@tag--link' this merge=true }}
    {{/each}}
</div>
 
{
  "tags": [
    {
      "text": "Inspiratie"
    },
    {
      "text": "FM Trends"
    },
    {
      "text": "Mega Trends",
      "modifier": "active",
      "hasCloseIcon": true
    },
    {
      "text": "Sociale Trends"
    },
    {
      "text": "Technologische Trends"
    }
  ]
}
  • Content: 
    .mol-tag-bubble{
    @apply flex flex-wrap gap-x-4 gap-y-2;

   .title-wrap {
        @apply mb-14 space-y-4;
        @apply md:flex md:items-center justify-between;
    
        .atm-tag {
            @apply m-0;
        }
            
        .atm-button {
            @apply mr-0;
        }
    }
}
  • URL: /components/raw/tag-bubble/tag-bubble.css
  • Filesystem Path: src\components\03-molecules\tag-bubble\tag-bubble.css
  • Size: 316 Bytes

No notes defined.