Tag Group

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<div class="tagGroup">
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
    </div>
</div>


        
            <!-- Default -->
<div class="tagGroup">
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
    </div>
</div>


        
            <!-- Large -->
<div class="tagGroup">
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
    </div>
    <div class="tagGroup-item">
        <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
    </div>
</div>


        
            <!-- Selectable -->
<div class="tagGroup">
    <div class="tagGroup-item">
        <label class="tag-container">
            <input type="checkbox" />
            <span class="tag" data-selectable="true">
                Church-key Viny
            </span>
        </label>
    </div>
    <div class="tagGroup-item">
        <label class="tag-container">
            <input type="checkbox" />
            <span class="tag" data-selectable="true">
                Flexitarian Retro
            </span>
        </label>
    </div>
    <div class="tagGroup-item">
        <label class="tag-container">
            <input type="checkbox" />
            <span class="tag" data-selectable="true">
                Hashtag Echo Park
            </span>
        </label>
    </div>
    <div class="tagGroup-item">
        <label class="tag-container">
            <input type="checkbox" />
            <span class="tag" data-selectable="true">
                Polaroid Vice
            </span>
        </label>
    </div>
    <div class="tagGroup-item">
        <label class="tag-container">
            <input type="checkbox" />
            <span class="tag" data-selectable="true">
                Bitters Sartorial
            </span>
        </label>
    </div>
</div>


        
            <!-- Removable -->
<div class="tagGroup">
    <div class="tagGroup-item">
        <span class="tag" data-removable="true">
            Church-key Viny
            <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                Entfernen
            </button>
        </span>
    </div>
    <div class="tagGroup-item">
        <span class="tag" data-removable="true">
            Flexitarian Retro
            <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                Entfernen
            </button>
        </span>
    </div>
    <div class="tagGroup-item">
        <span class="tag" data-removable="true">
            Hashtag Echo Park
            <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                Entfernen
            </button>
        </span>
    </div>
    <div class="tagGroup-item">
        <span class="tag" data-removable="true">
            Polaroid Vice
            <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                Entfernen
            </button>
        </span>
    </div>
    <div class="tagGroup-item">
        <span class="tag" data-removable="true">
            Bitters Sartorial
            <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                Entfernen
            </button>
        </span>
    </div>
</div>


        
            <!-- Documentation only -->
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Large</h2>

        <div class="doc-header-configuration">
            <ul data-label="Modifier">
                <li>is-large</li>
            </ul>
        </div>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">

            <div class="tagGroup is-large ">
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
                </div>
            </div>

            <div class="tagGroup is-large ">
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Church-key Viny
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Flexitarian Retro
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Hashtag Echo Park
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Polaroid Vice
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Bitters Sartorial
                        </span>
                    </label>
                </div>
            </div>

            <div class="tagGroup is-large ">
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Church-key Viny
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Flexitarian Retro
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Hashtag Echo Park
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Polaroid Vice
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Bitters Sartorial
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
            </div>

        </div>

    </div>
</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Medium (Default)</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">

            <div class="tagGroup ">
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
                </div>
            </div>

            <div class="tagGroup ">
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Church-key Viny
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Flexitarian Retro
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Hashtag Echo Park
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Polaroid Vice
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Bitters Sartorial
                        </span>
                    </label>
                </div>
            </div>

            <div class="tagGroup ">
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Church-key Viny
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Flexitarian Retro
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Hashtag Echo Park
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Polaroid Vice
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Bitters Sartorial
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
            </div>

        </div>

    </div>
</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Small</h2>

        <div class="doc-header-configuration">
            <ul data-label="Modifier">
                <li>is-small</li>
            </ul>
        </div>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">

            <div class="tagGroup is-small ">
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
                </div>
            </div>

            <div class="tagGroup is-small ">
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Church-key Viny
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Flexitarian Retro
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Hashtag Echo Park
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Polaroid Vice
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Bitters Sartorial
                        </span>
                    </label>
                </div>
            </div>

            <div class="tagGroup is-small ">
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Church-key Viny
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Flexitarian Retro
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Hashtag Echo Park
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Polaroid Vice
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Bitters Sartorial
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
            </div>

        </div>

    </div>
</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Dark Theme</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples" data-theme="dark">

            <div class="tagGroup ">
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
                </div>
                <div class="tagGroup-item">
                    <a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
                </div>
            </div>

            <div class="tagGroup ">
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Church-key Viny
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Flexitarian Retro
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Hashtag Echo Park
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Polaroid Vice
                        </span>
                    </label>
                </div>
                <div class="tagGroup-item">
                    <label class="tag-container">
                        <input type="checkbox" />
                        <span class="tag" data-selectable="true">
                            Bitters Sartorial
                        </span>
                    </label>
                </div>
            </div>

            <div class="tagGroup ">
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Church-key Viny
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Flexitarian Retro
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Hashtag Echo Park
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Polaroid Vice
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
                <div class="tagGroup-item">
                    <span class="tag" data-removable="true">
                        Bitters Sartorial
                        <button class="tag-button" title="Entfernen" onclick="this.parentNode.parentNode.remove();">
                            Entfernen
                        </button>
                    </span>
                </div>
            </div>

        </div>

    </div>
</div>

Handle: @taggroup
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/tagGroup/tagGroup.html
References (2): @tag, @taggroup
Referenced by (38): @trendspageheader, @trendspageheader--legacy-kicker, @trendspageheader--with-byline, @trendspageheader--with-tags, @trendspageheader--with-interaction-bar, @trendspageheader--with-figure, @trendspageheader--complete, @pagesection, @pagesection--with-backdrop, @pagesection--with-description, @pagesection--with-blocks, @pagesection--with-blocks-on-backdrop, @contentloader--demo-only--single, @contentloader--demo-only--form--tags, @contentloader--demo-only--form--combobox, @contentloader--demo-only--multiple, @filterpanel, @filterpanel--two-items, @filterpanel--single-item, @filterpanel--groups, @filterpanel--cascading, @filterpanel--comboboxes, @filterpanel--combobox--cascading, @filterpanel--live-filter, @filterpanel--live-and-filter, @filterpanel--live-and-cascading-dropdowns, @filterpanel--live-and-combobox, @filterpanel--tagsgroup, @filterpanel--two-tagsgroups, @filterpanel--tagsgroup-and-two-items, @filterpanel--status-and-sorting, @filterpanel--with-page-header, @filterpanel--with-narrow-page-header, @filterpanel--demo-data, @taggroup--large, @taggroup--selectable, @taggroup--removable, @taggroup--doc-only


        <!-- Default -->
<div class="tagGroup{{#modifier}} {{.}}{{/modifier}}">
        {{#tags}}
    <div class="tagGroup-item">
        {{render '@tag' (contextData '@taggroup' this) merge=true}}
    </div>
        {{/tags}}
</div>

<!-- Default -->
<div class="tagGroup{{#modifier}} {{.}}{{/modifier}}">
        {{#tags}}
    <div class="tagGroup-item">
        {{render '@tag' (contextData '@taggroup' this) merge=true}}
    </div>
        {{/tags}}
</div>

<!-- Large -->
<div class="tagGroup{{#modifier}} {{.}}{{/modifier}}">
        {{#tags}}
    <div class="tagGroup-item">
        {{render '@tag' (contextData '@taggroup' this) merge=true}}
    </div>
        {{/tags}}
</div>

<!-- Selectable -->
<div class="tagGroup{{#modifier}} {{.}}{{/modifier}}">
        {{#tags}}
    <div class="tagGroup-item">
        {{render '@tag' (contextData '@taggroup' this) merge=true}}
    </div>
        {{/tags}}
</div>

<!-- Removable -->
<div class="tagGroup{{#modifier}} {{.}}{{/modifier}}">
        {{#tags}}
    <div class="tagGroup-item">
        {{render '@tag' (contextData '@taggroup' this) merge=true}}
    </div>
        {{/tags}}
</div>

<!-- Documentation only -->
{{#sections}}
<div class="doc-section">

    <div class="doc-header">

            {{#title}}
        <h2 class="doc-header-title">{{{.}}}</h2>
            {{/title}}

            {{#if modifiers}}
        <div class="doc-header-configuration">
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
        </div>
            {{/if}}

    </div>

        {{#variants}}
    <div class="doc-variant">

        <div class="doc-variant-samples"{{#theme}} data-theme="{{.}}"{{/theme}}>

            {{#samples}}
                {{render '@taggroup' (contextData '@taggroup' this) merge=true}}
            {{/samples}}

        </div>

    </div>
        {{/variants}}
</div>
    {{/sections}}


        
        
            /* Default */
{
  "tags": [
    {
      "label": "Church-key Viny"
    },
    {
      "label": "Flexitarian Retro"
    },
    {
      "label": "Hashtag Echo Park"
    },
    {
      "label": "Polaroid Vice"
    },
    {
      "label": "Bitters Sartorial"
    }
  ]
}


        
            /* Default */
{
  "tags": [
    {
      "label": "Church-key Viny"
    },
    {
      "label": "Flexitarian Retro"
    },
    {
      "label": "Hashtag Echo Park"
    },
    {
      "label": "Polaroid Vice"
    },
    {
      "label": "Bitters Sartorial"
    }
  ]
}


        
            /* Large */
{
  "tags": [
    {
      "label": "Church-key Viny"
    },
    {
      "label": "Flexitarian Retro"
    },
    {
      "label": "Hashtag Echo Park"
    },
    {
      "label": "Polaroid Vice"
    },
    {
      "label": "Bitters Sartorial"
    }
  ],
  "modifiers": "is-large"
}


        
            /* Selectable */
{
  "tags": [
    {
      "is-selectable": true,
      "label": "Church-key Viny"
    },
    {
      "is-selectable": true,
      "label": "Flexitarian Retro"
    },
    {
      "is-selectable": true,
      "label": "Hashtag Echo Park"
    },
    {
      "is-selectable": true,
      "label": "Polaroid Vice"
    },
    {
      "is-selectable": true,
      "label": "Bitters Sartorial"
    }
  ]
}


        
            /* Removable */
{
  "tags": [
    {
      "is-removable": true,
      "label": "Church-key Viny",
      "button": {
        "label": "Entfernen",
        "onclick": "this.parentNode.parentNode.remove();"
      }
    },
    {
      "is-removable": true,
      "label": "Flexitarian Retro",
      "button": {
        "label": "Entfernen",
        "onclick": "this.parentNode.parentNode.remove();"
      }
    },
    {
      "is-removable": true,
      "label": "Hashtag Echo Park",
      "button": {
        "label": "Entfernen",
        "onclick": "this.parentNode.parentNode.remove();"
      }
    },
    {
      "is-removable": true,
      "label": "Polaroid Vice",
      "button": {
        "label": "Entfernen",
        "onclick": "this.parentNode.parentNode.remove();"
      }
    },
    {
      "is-removable": true,
      "label": "Bitters Sartorial",
      "button": {
        "label": "Entfernen",
        "onclick": "this.parentNode.parentNode.remove();"
      }
    }
  ]
}


        
            /* Documentation only */
{
  "tags": [
    {
      "label": "Church-key Viny"
    },
    {
      "label": "Flexitarian Retro"
    },
    {
      "label": "Hashtag Echo Park"
    },
    {
      "label": "Polaroid Vice"
    },
    {
      "label": "Bitters Sartorial"
    }
  ],
  "sections": [
    {
      "title": "Large",
      "modifiers": "is-large",
      "variants": [
        {
          "modifiers": "is-large",
          "samples": [
            {
              "error": "Context not found!",
              "modifier": "is-large "
            },
            {
              "tags": [
                {
                  "is-selectable": true,
                  "label": "Church-key Viny"
                },
                {
                  "is-selectable": true,
                  "label": "Flexitarian Retro"
                },
                {
                  "is-selectable": true,
                  "label": "Hashtag Echo Park"
                },
                {
                  "is-selectable": true,
                  "label": "Polaroid Vice"
                },
                {
                  "is-selectable": true,
                  "label": "Bitters Sartorial"
                }
              ],
              "modifier": "is-large "
            },
            {
              "tags": [
                {
                  "is-removable": true,
                  "label": "Church-key Viny",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Flexitarian Retro",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Hashtag Echo Park",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Polaroid Vice",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Bitters Sartorial",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                }
              ],
              "modifier": "is-large "
            }
          ],
          "modifier": "is-large"
        }
      ]
    },
    {
      "title": "Medium (Default)",
      "variants": [
        {
          "samples": [
            {
              "error": "Context not found!",
              "modifier": ""
            },
            {
              "tags": [
                {
                  "is-selectable": true,
                  "label": "Church-key Viny"
                },
                {
                  "is-selectable": true,
                  "label": "Flexitarian Retro"
                },
                {
                  "is-selectable": true,
                  "label": "Hashtag Echo Park"
                },
                {
                  "is-selectable": true,
                  "label": "Polaroid Vice"
                },
                {
                  "is-selectable": true,
                  "label": "Bitters Sartorial"
                }
              ],
              "modifier": ""
            },
            {
              "tags": [
                {
                  "is-removable": true,
                  "label": "Church-key Viny",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Flexitarian Retro",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Hashtag Echo Park",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Polaroid Vice",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Bitters Sartorial",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                }
              ],
              "modifier": ""
            }
          ],
          "modifier": ""
        }
      ]
    },
    {
      "title": "Small",
      "modifiers": "is-small",
      "variants": [
        {
          "modifiers": "is-small",
          "samples": [
            {
              "error": "Context not found!",
              "modifier": "is-small "
            },
            {
              "tags": [
                {
                  "is-selectable": true,
                  "label": "Church-key Viny"
                },
                {
                  "is-selectable": true,
                  "label": "Flexitarian Retro"
                },
                {
                  "is-selectable": true,
                  "label": "Hashtag Echo Park"
                },
                {
                  "is-selectable": true,
                  "label": "Polaroid Vice"
                },
                {
                  "is-selectable": true,
                  "label": "Bitters Sartorial"
                }
              ],
              "modifier": "is-small "
            },
            {
              "tags": [
                {
                  "is-removable": true,
                  "label": "Church-key Viny",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Flexitarian Retro",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Hashtag Echo Park",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Polaroid Vice",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Bitters Sartorial",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                }
              ],
              "modifier": "is-small "
            }
          ],
          "modifier": "is-small"
        }
      ]
    },
    {
      "title": "Dark Theme",
      "variants": [
        {
          "title": "Medium (Dark Theme)",
          "theme": "dark",
          "samples": [
            {
              "error": "Context not found!",
              "modifier": ""
            },
            {
              "tags": [
                {
                  "is-selectable": true,
                  "label": "Church-key Viny"
                },
                {
                  "is-selectable": true,
                  "label": "Flexitarian Retro"
                },
                {
                  "is-selectable": true,
                  "label": "Hashtag Echo Park"
                },
                {
                  "is-selectable": true,
                  "label": "Polaroid Vice"
                },
                {
                  "is-selectable": true,
                  "label": "Bitters Sartorial"
                }
              ],
              "modifier": ""
            },
            {
              "tags": [
                {
                  "is-removable": true,
                  "label": "Church-key Viny",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Flexitarian Retro",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Hashtag Echo Park",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Polaroid Vice",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                },
                {
                  "is-removable": true,
                  "label": "Bitters Sartorial",
                  "button": {
                    "label": "Entfernen",
                    "onclick": "this.parentNode.parentNode.remove();"
                  }
                }
              ],
              "modifier": ""
            }
          ],
          "modifier": ""
        }
      ]
    }
  ]
}

File:

Content:


                                $tagGroup_gap: .6rem;

@import "_tagGroup.styles";


%tagGroup {
    gap: $tagGroup_gap;
}

%tagGroup--small {
    gap: (math.div($_font-size--small, 1rem) * $tagGroup_gap);
}

%tagGroup--large {
    gap: (math.div($_font-size--large, 1rem) * $tagGroup_gap);

    .tag {
        @extend %tag--large;
    }

}

.tagGroup {

    &.is-large {
        @extend %tagGroup--large;
    }

}

URL: /components/raw/taggroup/_tagGroup.scss
Filesystem Path: components/03-fragments/tagGroup/_tagGroup.scss
Size: 383 Bytes

Content:


                                %tagGroup {
    @include stack-spacing(component);

    display: flex;
    flex-wrap: wrap;
    column-gap: .8rem;
    row-gap: .9rem;

    .tag {
        @include stack-spacing(0);
    }

}

%tagGroup--small {
    column-gap: .6rem;
    row-gap: .7rem;

    .tag {
        @extend %tag--small;
    }

}

.tagGroup {
    @extend %tagGroup;

    &.is-small {
        @extend %tagGroup--small;
    }

}

URL: /components/raw/taggroup/_tagGroup.styles.scss
Filesystem Path: components/03-fragments/tagGroup/_tagGroup.styles.scss
Size: 401 Bytes