DSO Toolkit homepage

Filterblok

Component preview opent in nieuw tabblad

Het filterblok is een compositie die gebruik maakt van component .dso-highlight-box verrijkt met de .dso-context-wrapper modifier, om de [Alle opties]-knop naast het label te plaatsen.

In deze compositie wordt voorts een .dso-label-group geplaatst voor de gekozen opties (filters).

<section>
    <div class="dso-highlight-box dso-context-wrapper">
        <div class="dso-context-label">
            <h3>Uw keuzes</h3>
        </div>
        <div class="dso-context-container">
            <button type="button" class="dso-tertiary">
                <dso-icon icon="pencil"></dso-icon><span>Alle opties</span>
            </button>

        </div>
        <p><b>Achterwillenseweg 9a, Gouda</b></p>
        <div class="dso-label-group">

            <span class="dso-label dso-label-bright">

                Geldend

                <button type="button" title="Verwijder">
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>

            <span class="dso-label dso-label-bright">

                Regels

                <button type="button" title="Verwijder">
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>

            <span class="dso-label dso-label-bright">

                Tuin

                <button type="button" title="Verwijder">
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>

            <span class="dso-label dso-label-bright">

                Woongebied

                <button type="button" title="Verwijder">
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>

            <span class="dso-label dso-label-bright">

                Geluidzone

                <button type="button" title="Verwijder">
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>

            <span class="dso-label dso-label-bright">

                Thema: milieu algemeen

                <button type="button" title="Verwijder">
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>

        </div>

    </div>
</section>
<section>
  <div class="dso-highlight-box dso-context-wrapper">
    <div class="dso-context-label">
      <h3>Uw keuzes</h3>
    </div>
    <div class="dso-context-container">
      {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Alle opties', icon: 'pencil'} %}
    </div>
    <p><b>Achterwillenseweg 9a, Gouda</b></p>
    {% render '@label-group', {labels: labels} %}
  </div>
</section>
__title: default
labels:
  - label: Geldend
    status: bright
  - label: Regels
    status: bright
  - label: Tuin
    status: bright
  - label: Woongebied
    status: bright
  - label: Geluidzone
    status: bright
  - label: 'Thema: milieu algemeen'
    status: bright