Gov Design System CE - Templates

Tags 

<ul class="gov-tags gov-list--plain">
    <li>
        <gov-tag color="primary" type="bold" size="s">
            <gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
            Tag
        </gov-tag>
    </li>
    <li>
        <gov-tag color="primary" type="bold" size="s">
            <gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
            Tag
        </gov-tag>
    </li>
    <li>
        <gov-tag color="primary" type="bold" size="s">
            <gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
            Tag
        </gov-tag>
    </li>
    <li>
        <gov-tag color="primary" type="bold" size="s">
            <gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
            Tag
        </gov-tag>
    </li>
    <li>
        <gov-tag color="primary" type="bold" size="s">
            <gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
            Tag
        </gov-tag>
    </li>
    <li>
        <gov-tag color="primary" type="bold" size="s">
            <gov-icon type="templates" name="star-fill" slot="icon-start"></gov-icon>
            Tag
        </gov-tag>
    </li>
</ul>
 
<ul class="gov-tags gov-list--plain">
    {{#each tag}}
        <li>
            {{> @tag this }}
        </li>
    {{/each}}
</ul>
 
{
  "tag": [
    {
      "name": "Tag",
      "color": "primary",
      "type": "bold",
      "size": "s",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "star-fill"
      }
    },
    {
      "name": "Tag",
      "color": "primary",
      "type": "bold",
      "size": "s",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "star-fill"
      }
    },
    {
      "name": "Tag",
      "color": "primary",
      "type": "bold",
      "size": "s",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "star-fill"
      }
    },
    {
      "name": "Tag",
      "color": "primary",
      "type": "bold",
      "size": "s",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "star-fill"
      }
    },
    {
      "name": "Tag",
      "color": "primary",
      "type": "bold",
      "size": "s",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "star-fill"
      }
    },
    {
      "name": "Tag",
      "color": "primary",
      "type": "bold",
      "size": "s",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "star-fill"
      }
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";

.gov-tags {
    @include flex($gap: var(--spacing-s-nudge));
    flex-wrap: wrap;
}
  • URL: /components/raw/tags/tags.scss
  • Filesystem Path: src/components/molecules/tags/tags.scss
  • Size: 118 Bytes

No notes defined.