Swegon Component Library

Chips List 

<ul class="chips-list">
    <li>
        <button type="button" class="chips ">
            <span class="chips__text">
                Grupprum
            </span>
            <span class="chips__icon">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-plus"></use>
                </svg>
            </span>
        </button>

    </li>
    <li>
        <button type="button" class="chips ">
            <span class="chips__text">
                Omblandande
            </span>
            <span class="chips__icon">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-plus"></use>
                </svg>
            </span>
        </button>

    </li>
    <li>
        <button type="button" class="chips ">
            <span class="chips__text">
                Ställbar spridning
            </span>
            <span class="chips__icon">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-plus"></use>
                </svg>
            </span>
        </button>

    </li>
    <li>
        <button type="button" class="chips ">
            <span class="chips__text">
                Sunda hus
            </span>
            <span class="chips__icon">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-plus"></use>
                </svg>
            </span>
        </button>

    </li>
</ul>
 
<ul class="chips-list">
    {{#each items}}
        <li>
            {{render "@chips" this }}
        </li>
    {{/each}}
</ul>
 
{
  "items": [
    {
      "label": "Grupprum",
      "linkIcon": "plus"
    },
    {
      "label": "Omblandande",
      "linkIcon": "plus"
    },
    {
      "label": "Ställbar spridning",
      "linkIcon": "plus"
    },
    {
      "label": "Sunda hus",
      "linkIcon": "plus"
    }
  ]
}
  • Content: 
    .chips-list {
    margin: 16px -12px 0;
    list-style: none;
    padding: 0;
    display: inline-block;
    vertical-align: bottom;

    @include breakpoint($l) {
        margin: 0 -12px;
    }

    li {
        display: inline-block;
        vertical-align: top;
        margin: 0 4px 8px;
    }
}
  • URL: /components/raw/chips-list/chips-list.scss
  • Filesystem Path: src/components/chips-list/chips-list.scss
  • Size: 299 Bytes

No notes defined.