UHasselt Component Library

Tag: Tag Grey Sm 

<span class="tag tag-gray tag-sm">
    This is a tag

</span>
 
<{{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}}>
 
{
  "size": "tag-sm",
  "modifier": "tag-gray",
  "element": "span",
  "title": "",
  "href": "",
  "target": "",
  "text": "This is a tag",
  "icon": ""
}
  • 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.