Style Guide

<div class="filterBox">
    <div class="filterBox__mobileButton">Filter</div>
    <div class="filterBox__content">
        <div class="filterBox__contentHeader">
            <div class="filterBox__contentTitle">Filter</div>
            <div class="filterBox__close">
                <i class="icon icon-close"></i>
            </div>
        </div>
        <div class="filterBox__filter">
            <div class="row gridGap--small">
                <div class="col-12 col-lg-9 filtersColumn">
                    <div class="row gridGap--small">
                        <div class="col-12 col-sm-4 col-md-3 marginBottom">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="callaway">filter-Marke-8</option>
                                        <option value="titleist">filter-Marke-8</option>
                                        <option value="taylormade">filter-Marke-8</option>
                                    </select>
                                    <div class="customSelect__selected">Marke</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Marke
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?marke=callaway&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Callaway
                                                </div>
                                            </a>
                                            <a href="?marke=titleist&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Titleist
                                                </div>
                                            </a>
                                            <a href="?marke=taylormade&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    TaylorMade
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <form method="get" class="customSelect js-customSelect customSelect--multiple">
                                <input class="customSelect__hiddenFormField" name="farbe" value="">
                                <input class="customSelect__hiddenFormField" name="sort_by" value="base_price_desc">
                                <div class="customSelect__selected">
                                    Farbe <span class="customSelect__selectedCount"></span>
                                </div>
                                <div class="customSelect__dropdown js-searchWrapper">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader">
                                        <div class="customSelect__dropdownTitle">
                                            Farbe
                                        </div>
                                        <div class="inputGroup searchBar">
                                            <input class="js-searchInput" data-wrapper="js-searchWrapper" data-item="js-searchItem" type="text" placeholder="Filter suchen">
                                            <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/silber">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Silber</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/rot">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Rot</div>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownFooter">
                                        <button type="submit" class="button button--action button--sm">
                                            Anwenden
                                        </button>
                                        <br>
                                        <button class="linkWithIcon customSelectReset">
                                            <i class="icon icon-retoure"></i><span>Zurücksetzen</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="regular">filter-Flex-4</option>
                                    <option value="stiff">filter-Flex-4</option>
                                </select>
                                <div class="customSelect__selected">Flex</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Flex
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?flex=regular&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Regular (R)
                                            </div>
                                        </a>
                                        <a href="?flex=stiff&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Stiff (S)
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="60.00">filter-Lie-Winkel-6</option>
                                        <option value="58.50">filter-Lie-Winkel-6</option>
                                    </select>
                                    <div class="customSelect__selected">Lie-Winkel</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Lie-Winkel
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?lie=60.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    60
                                                </div>
                                            </a>
                                            <a href="?lie=58.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    58.50
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="10.00">filter-Loft-7</option>
                                    <option value="11.50">filter-Loft-7</option>
                                    <option value="10.50">filter-Loft-7</option>
                                    <option value="9.00">filter-Loft-7</option>
                                </select>
                                <div class="customSelect__selected">Loft</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Loft
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?loft=10.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10
                                            </div>
                                        </a>
                                        <a href="?loft=11.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                11.50
                                            </div>
                                        </a>
                                        <a href="?loft=10.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10.50
                                            </div>
                                        </a>
                                        <a href="?loft=9.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                9
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="filterBox__toggleFilterColumn marginBottom">
                            <span class="link filterBox__showHiddenFilters">+ Mehr Filter</span>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-4 col-lg-3 marginBottom sortSelectColumn">
                    <form method="get" class="inputGroup is-filled">
                        <div class="customSelect js-customSelect customSelect--small sortingSelect ">
                            <select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by">
                                <option value="item_no">Artikelnummer</option>
                                <option value="description">Artikelbezeichnung</option>
                                <option value="creation_date">Neueste</option>
                                <option value="sorting">Empfehlung</option>
                                <option value="base_price_asc">Preis aufsteigend</option>
                                <option value="base_price_desc" selected="">Preis absteigend</option>
                            </select>
                            <div class="customSelect__selected">Preis absteigend</div>
                            <div class="customSelect__dropdown">
                                <div class="customSelect__dropdownClose">
                                    <i class="icon icon-close"></i>
                                </div>
                                <div class="customSelect__dropdownHeader d-block d-sm-none">
                                    <div class="customSelect__dropdownTitle">
                                        Sortierung
                                    </div>
                                </div>
                                <div class="customSelect__dropdownBody">
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
                                        <div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
                                        <div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="creation_date">
                                        <div class="customSelect__dropdownItemHeadline">Neueste</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
                                        <div class="customSelect__dropdownItemHeadline">Empfehlung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="base_price_asc">
                                        <div class="customSelect__dropdownItemHeadline">Preis aufsteigend</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="base_price_desc">
                                        <div class="customSelect__dropdownItemHeadline">Preis absteigend</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>