Search Block - X-Cart Admin UI Kit

Basic Search Block

Without Advanced filters

<div class="xcart-search-panel">
    <div class="xcart-filter-row">
        <div class="xcart-filter-main-input">
            <input type="text" class="xcart-input" placeholder="...">
        </div>
        <div class="xcart-filter-selector">
            <select class="xcart-select">...</select>
        </div>
        <button class="xcart-btn xcart-btn-secondary">Search</button>
    </div>
</div>

With Advanced Filters

Collapsed state with Advanced filters link

Advanced filters

Save view Clear all

<div class="xcart-filter-row-secondary">
    <a href="#" class="xcart-filter-advanced-link">
        Advanced filters
        <i class="fas fa-chevron-right"></i>
    </a>
    <div class="xcart-filter-actions">
        <a href="#" class="xcart-filter-action-link">Save view</a>
        <span class="xcart-filter-actions-divider"></span>
        <a href="#" class="xcart-filter-action-link">Clear all</a>
    </div>
</div>

Advanced Filters Selected

Counter badge shows number of active filters

Advanced filters 2

Save view Clear all

<a href="#" class="xcart-filter-advanced-link">
    Advanced filters
    <span class="xcart-filter-advanced-counter">2</span>
    <i class="fas fa-chevron-right"></i>
</a>

Advanced Filters Expanded

Full expanded state with all filter fields

Advanced filters 10

Save view Clear all

Design Specifications

From Figma Design System

Search Block Container

Background: #DDF1FF
Border-radius: 4px
Padding: 10px

Layout Spacing

Gap between elements: 20px
Gap between search bar and button: 20px
Gap between rows: 10px

Links (Advanced filters, Save view, Clear all)

Font: 14px Regular
Color: #2274A6

Counter Badge

Font: 14px Semibold
Text color: #FFFFFF
Background: #757575

CSS Classes Reference

Class	Description
`.xcart-search-panel`	Main container (background var(--xcart-info-bg), border-radius 4px, padding 10px)
`.xcart-filter-row`	Flex row for filter elements (gap 20px)
`.xcart-filter-main-input`	Main input wrapper (flex: 1, takes remaining space)
`.xcart-filter-selector`	Fixed width selector (245px)
`.xcart-filter-row-secondary`	Second row with links (margin-top 10px)
`.xcart-filter-advanced-link`	Advanced filters link (14px, var(--xcart-primary))
`.xcart-filter-advanced-counter`	Counter badge (14px semibold, white on var(--xcart-text-secondary))
`.xcart-filter-actions`	Right-side action links container
`.xcart-filter-action-link`	Save view / Clear all links (14px, var(--xcart-primary))
`.xcart-filter-actions-divider`	Vertical divider between action links
`.xcart-filter-advanced-panel`	Expandable advanced filters container
`.xcart-filter-advanced-panel.show`	Visible state for advanced panel
`.xcart-filter-advanced-grid`	2-column grid for advanced filter fields
`.xcart-filter-group`	Label + input pair in advanced filters
`.xcart-filter-label`	Field label (14px, min-width 120px)