Gov Design System CE - Templates

Chips 

<nav class="gov-chips" aria-label="Chip list">
    <ul class="gov-list--plain">
        <li>
            <gov-chip color="primary" type="solid" size="m" href="#">
                Chip
            </gov-chip>
        </li>
        <li>
            <gov-chip color="primary" type="solid" size="m" href="#">
                Chip
            </gov-chip>
        </li>
        <li>
            <gov-chip color="primary" type="solid" size="m" href="#">
                Chip
            </gov-chip>
        </li>
        <li>
            <gov-chip color="primary" type="solid" size="m" href="#">
                Chip
            </gov-chip>
        </li>
        <li>
            <gov-chip color="primary" type="solid" size="m" href="#">
                Chip
            </gov-chip>
        </li>
        <li>
            <gov-chip color="primary" type="solid" size="m" href="#">
                Chip
            </gov-chip>
        </li>
    </ul>
</nav>
 
<nav class="gov-chips{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}"{{#if aria-label}} aria-label="{{ aria-label }}"{{/if}}>
    <ul class="gov-list--plain">
        {{#each chip}}
            <li>
                {{> @chip this }}
            </li>
        {{/each}}
    </ul>
</nav>
 
{
  "aria-label": "Chip list",
  "chip": [
    {
      "name": "Chip",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "href": "#"
    },
    {
      "name": "Chip",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "href": "#"
    },
    {
      "name": "Chip",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "href": "#"
    },
    {
      "name": "Chip",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "href": "#"
    },
    {
      "name": "Chip",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "href": "#"
    },
    {
      "name": "Chip",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "href": "#"
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";

$class: ".gov-chips";

#{$class} {
    position: relative;

    ul, ul:first-child {
        padding-left: 0;
        margin-top: 0;
    }

    ul {
        @include flex($gap: var(--spacing-s-nudge), $wrap: wrap);
        gov-chip, .gov-chip {
            .element {
                white-space: nowrap;
            }
        }
    }

    &--scroll {
        ul {
            overflow-x: auto;
            padding: rem-calc(3);
            @include flex($gap: var(--spacing-s-nudge), $wrap: nowrap);
            @include scrollbar();
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 100%;
            background: linear-gradient(270deg, var(--background-page) 0%, rgba(245, 245, 245, 0.00) 100%);
        }
    }
}
  • URL: /components/raw/chips/chips.scss
  • Filesystem Path: src/components/molecules/chips/chips.scss
  • Size: 874 Bytes

No notes defined.