showcar-ui/src/06-components/organisms/search-mask/docs/search-mask.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<div class="sc-search__wrapper sc-tabs" data-tabs="search">
    <nav class="sc-tabs--with-icon">
        <button class="sc-tab--with-icon sc-tab--with-icon--active" data-section="search-auto">
            <as24-icon type="navigation/car"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="search-moto">
            <as24-icon type="navigation/motocycle"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="search-caravan">
            <as24-icon type="navigation/caravan"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="search-truck">
            <as24-icon type="navigation/truck"></as24-icon>
        </button>
    </nav>
    <div class="sc-search__content sc-tabs__content sc-tabs__content--visible" data-section="search-auto">
        <div class="sc-search__options sc-hidden-at-s">
            <input class="sc-input" id="seach-new" type="checkbox" checked/>
            <label for="seach-new">Neu</label>
            <input class="sc-input" id="seach-used" type="checkbox" checked/>
            <label for="seach-used">Gebraucht</label>
            <input class="sc-input" id="seach-daily-admission" type="checkbox"/>
            <label for="seach-daily-admission">Tageszulassung</label>
        </div>
        <div class="sc-search__filter-wrapper">
            <select class="sc-input">
                <option>Marke</option>
                <option>...</option>
            </select>
            <select class="sc-input" disabled>
                <option>Modell</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Erstzulassung ab</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Preis bis (€)</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Alle Länder</option>
                <option>...</option>
            </select>
            <input type="text" class="sc-input" placeholder="Stadt/PLZ">
            <div class="sc-search__content__actions">
                <button class="sc-btn-bob sc-btn-block">Absenden</button>
                <a class="sc-search__link">Weitere Suchoptionen</a>
            </div>
        </div>
    </div>
    <div class="sc-search__content sc-tabs__content" data-section="search-moto">Moto</div>
    <div class="sc-search__content sc-tabs__content" data-section="search-caravan">Caravan</div>
    <div class="sc-search__content sc-tabs__content" data-section="search-truck">Truck</div>
</div>