Tag

  • id: w-i-1
  • New 
  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  title: "New",
}} %}

      
  •           
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500">
      <span class="i-tag__title">New</span>
    </span>

Tag as link 

  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  title: "Top",
  url: "#url",
}} %}

      
  •           
<a class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500" href="#url" title="Top">
      <span class="i-tag__title">Top</span>
    </a>

Tag with icon

  • New 
  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  title: "New",
  icon: {
    src: "@Images/svg/play.svg",
  }
}} %}

      
  •           
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500">
      <span class="i-tag__title">New</span>
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </span>

Tag with icon - before

  • New 
  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  title: "New",
  icon_before: true,
  icon: {
    src: "@Images/svg/play.svg",
  }
}} %}

      
  •           
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500    --icon-before">
      <span class="i-tag__title">New</span>
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </span>

Tag outline variant

  • New 
  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  title: "New",
  variant: "outline",
}} %}

      
  •           
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --outline">
      <span class="i-tag__title">New</span>
    </span>

Tag size sm

  • New 
  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  title: "New",
  variant: "outline",
  size: "sm",
  icon: {
    src: "@Images/svg/play.svg",
  },
}} %}

      
  •           
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --outline  --sm">
      <span class="i-tag__title">New</span>
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </span>

Tag size lg

  • large 
  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  title: "large",
  size: "lg",
  icon: {
    src: "@Images/svg/play.svg",
  },
}} %}

      
  •           
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500   --lg">
      <span class="i-tag__title">large</span>
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </span>

Tag blank 

  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  url: "#url",
  title: "blank tag",
  variant: "blank",
  icon_before: true,
  icon: {
    src: "@Images/svg/play.svg",
  }
}} %}

      
  •           
<a class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --blank   --icon-before" href="#url" title="blank tag">
      <span class="i-tag__title">blank tag</span>
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </a>

Tag blank icon only 

  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  url: "#url",
  title: "blank tag with icon",
  variant: "blank",
  icon_only: true,
  icon: {
    src: "@Images/svg/play.svg",
  },
}} %}

      
  •           
<a class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --blank    --icon-only" href="#url" title="blank tag with icon">
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </a>

Icon only 

  •         {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  url: "#url",
  title: "large",
  variant: "outline",
  icon_only: true,
  icon: {
    src: "@Images/svg/play.svg",
  }
}} %}

      
  •           
<a class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --outline    --icon-only" href="#url" title="large">
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </a>