UHasselt Component Library

Tag 

<!-- Default -->
<span class="tag  ">
    This is a tag

</span>


<!-- Tag Red -->
<span class="tag tag-red ">
    This is a tag

</span>


<!-- Tag Red Outline -->
<span class="tag tag-red-outline ">
    This is a tag

</span>


<!-- Tag Red Round -->
<span class="tag tag-sm tag-red tag-round tag-sm">
    This is a tag

</span>


<!-- Tag White Round -->
<span class="tag tag-sm tag-white tag-round tag-sm">
    This is a tag

</span>


<!-- Tag Red Outline Sm -->
<span class="tag tag-red-outline tag-sm">
    This is a tag

</span>


<!-- Tag Lg -->
<span class="tag tag-black tag-lg">
    This is a tag

</span>


<!-- Tag Sm -->
<span class="tag tag-green tag-sm">
    This is a tag

</span>


<!-- Tag Grey -->
<span class="tag tag-gray ">
    This is a tag

</span>


<!-- Tag Grey Sm -->
<span class="tag tag-gray tag-sm">
    This is a tag

</span>


<!-- Tag Lg Icon -->
<a class="tag tag-red tag-lg" href="#">
    This is a tag
    <span class="icon fal fa-times   " aria-hidden="true"></span>
</a>


<!-- Tag Icon -->
<a class="tag  " href="#">
    This is a tag
    <span class="icon fal fa-times   " aria-hidden="true"></span>
</a>


<!-- Tag Sm Icon -->
<a class="tag  tag-sm" href="#">
    This is a tag
    <span class="icon fal fa-times   " aria-hidden="true"></span>
</a>


<{{element}}
    class="tag {{modifier}} {{size}}"
    {{#if title}}title="{{title}}"{{/if}}
    {{#if href}}href="{{href}}"{{/if}}
    {{#if target}}target="{{target}}"{{/if}}>
    {{text}}
    {{#if icon}}{{render '@icon' icon}}{{/if}}
</{{element}}>
 
/* Default */
{
  "size": "",
  "modifier": "",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Red */
{
  "size": "",
  "modifier": "tag-red",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Red Outline */
{
  "size": "",
  "modifier": "tag-red-outline",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Red Round */
{
  "size": "tag-sm",
  "modifier": "tag-sm tag-red tag-round",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag White Round */
{
  "size": "tag-sm",
  "modifier": "tag-sm tag-white tag-round",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Red Outline Sm */
{
  "size": "tag-sm",
  "modifier": "tag-red-outline",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Lg */
{
  "size": "tag-lg",
  "modifier": "tag-black",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Sm */
{
  "size": "tag-sm",
  "modifier": "tag-green",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Grey */
{
  "size": "",
  "modifier": "tag-gray",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Grey Sm */
{
  "size": "tag-sm",
  "modifier": "tag-gray",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}


/* Tag Lg Icon */
{
  "size": "tag-lg",
  "modifier": "tag-red",
  "element": "a",
  "title": "",
  "href": "#",
  "target": "",
  "text": "This is a tag",
  "icon": {
    "icon": "fa-times",
    "style": "fal"
  },
  "type": true
}


/* Tag Icon */
{
  "size": "",
  "modifier": "",
  "element": "a",
  "title": "",
  "href": "#",
  "target": "",
  "text": "This is a tag",
  "icon": {
    "icon": "fa-times",
    "style": "fal"
  },
  "type": true
}


/* Tag Sm Icon */
{
  "size": "tag-sm",
  "modifier": "",
  "element": "a",
  "title": "",
  "href": "#",
  "target": "",
  "text": "This is a tag",
  "icon": {
    "icon": "fa-times",
    "style": "fal"
  },
  "type": true
}
  • Content: 
    .tag {
    @apply inline-flex text-center w-auto h-auto items-center px-4 py-2 bg-white border border-solid border-gray;

    font-weight: 600;

    .icon {
        @apply text-red ml-2;
    }

    &-sm {
        @apply px-2 py-1 text-sm;
    }

    &-lg {
        @apply px-8 py-4;
    }

    &-black {
        @apply bg-black text-white;

        .icon {
            @apply text-white ml-2;
        }
    }

    &-red {
        @apply bg-red text-white;

        border: none;

        .icon {
            @apply text-white ml-2;
        }
    }

    &-white {
        @apply bg-white text-red;

        border: none;
        padding-left: 10px;
        padding-right: 10px;
    }

    &-round {
        border-radius: 40px;
    }

    &-red-outline {
        @apply text-red border-red;
    }

    &-green {
        @apply bg-green text-white;

        .icon {
            @apply text-white ml-2;
        }
    }

    &-gray {
        @apply bg-gray;
    }
}

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

No notes defined.