Members Service Product: With Filter

<div class="o-search">
    <div class="o-search__padded">
        <div class="row display-flex align-items-center">
            <div class="grid-auto u-p-r-0">
                <span class="o-search__icon">
                    <svg class="icon">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                </span>
            </div>
            <div class="grid u-p-l-0 display-flex">
                <label for="" class="u-visuallyhidden">Sök Medlemmar</label>
                <input type="search" class="o-search__input js-search-domain-input" placeholder="Sök Medlemmar" id="" aria-describedby="number-of-hits" value="">
                <button id="o-search-result-submit" type="submit" class="a-button a-button--sandstone a-button--large o-search__submit">
                    <span class="a-button__text">Sök</span>
                </button>
            </div>
        </div>
    </div>

    <div class="o-filter">
        <div class="js-o-accordion o-accordion o-accordion--transparent">
            <h3 class="o-filter__title js-accordion__header o-accordion__header--no-border o-accordion__header--inline">
                Filtrera
            </h3>
            <div class="js-accordion__panel o-accordion__panel--ash u-border-radius">
                <div class="o-accordion__panel__content">
                    <div class="row">
                        <div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
                            <fieldset class="field-group">
                                <legend class="label-legend">Kategori</legend>

                                <div class="checkbox">
                                    <input type="checkbox" id="tjansteleverantor" name="" value="0" class="a-checkbox u-visuallyhidden">
                                    <label for="tjansteleverantor">Tjänsteleverantör</label>
                                </div>

                                <div class="checkbox">
                                    <input type="checkbox" id="anvandarorganisation" name="" value="1" class="a-checkbox u-visuallyhidden">
                                    <label for="anvandarorganisation">Användarorganisation</label>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <button type="button" class="a-button a-button--ruby-light small o-filter__clear">
                        <span class="a-button__text">Rensa</span>
                    </button>
                </div>
            </div>
        </div>

    </div>
    <div class="o-search__status o-search__padded background-sandstone-light">
        Antal Medlemmar i listan: <span data-total-registrars="true">127</span>
    </div>
    <ul class="o-service-product-list">
        <li class="o-service-product-list__item">
            <div class="o-service-product-list__logo">
                <a href="http://www.gotit.se/"><img class="o-service-product-list__logo__image" src="https://www.skolfederation.se/wp-content/uploads/2017/02/logo_gotit.png" alt="Gotit AB"></a>
            </div>
            <div class="o-service-product-list__data">
                <dl class="o-service-product-list__data__list">
                    <dt>Alvis</dt>
                    <dd><a href="http://www.gotit.se/" class="u-link u-display-inline-block u-m-b-1">Gotit AB</a></dd>
                    <dd>Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.</dd>
                </dl>
            </div>
        </li>
        <li class="o-service-product-list__item">
            <div class="o-service-product-list__logo">
                <a href="http://www.gotit.se/"><img class="o-service-product-list__logo__image" src="https://www.skolfederation.se/wp-content/uploads/2016/10/MV-Nordic_logotyp-180x34.png" alt="MV Nordic AB"></a>
            </div>
            <div class="o-service-product-list__data">
                <dl class="o-service-product-list__data__list">
                    <dt>Det flexibla avtalet</dt>
                    <dd><a href="http://www.gotit.se/" class="u-link u-display-inline-block u-m-b-1">MV Nordic AB</a></dd>
                    <dd>Avtalen ger dig som uppköpare eller rektor möjlighet att hjälpa elever med dyslexi eller andra läs- och skrivsvårigheter med att klara sig i skolan eller på en utbildning.</dd>
                </dl>
            </div>
        </li>
        <li class="o-service-product-list__item">
            <div class="o-service-product-list__logo">
                <a href="http://www.gotit.se/"><img class="o-service-product-list__logo__image" src="https://www.skolfederation.se/wp-content/uploads/2015/04/NoK_Logo_35mm.gif" alt="Natur &amp; kultur"></a>
            </div>
            <div class="o-service-product-list__data">
                <dl class="o-service-product-list__data__list">
                    <dt>Digitalbok</dt>
                    <dd><a href="http://www.gotit.se/" class="u-link u-display-inline-block u-m-b-1">Natur &amp; kultur</a></dd>
                    <dd>En digitalbok är den tryckta boken i digitalt format. Läs boken på en pekplatta, datorn eller telefon.</dd>
                </dl>
            </div>
        </li>
    </ul>
</div>
<div class="a-paging-wrapper">
    <a href="#" class="a-paging">
        <span class="u-visuallyhidden">Föregående sida</span>
        <svg class="icon a-paging__icon">
            <use xlink:href="#icon-arrow-backwards"></use>
        </svg>
    </a>
    <span class="a-paging-wrapper__text">sida 2 av 11</span>
    <a href="#" class="a-paging">
        <span class="u-visuallyhidden">Nästa sida</span>
        <svg class="icon a-paging__icon">
            <use xlink:href="#icon-arrow-forwards"></use>
        </svg>
    </a>
</div>