Search Components

Basic Search Box

<div class="search-box">
    <input type="text" class="search-input" placeholder="Search..." aria-label="Search">
    <button class="search-button" aria-label="Search">🔍</button>
</div>

Advanced Search with Filters

<div class="search-advanced">
    <div class="search-box">
        <input type="text" class="search-input" placeholder="Search...">
        <button class="search-button">🔍</button>
    </div>
    <div class="search-filters">
        <div class="filter-group">
            <label for="category">Category</label>
            <select id="category" class="filter-select">
                <option value="">All</option>
            </select>
        </div>
    </div>
</div>

Search Results Display

Search Results

42 results found for "Zeus"
⚡

Zeus - King of the Gods

Supreme deity of Mount Olympus, god of the sky and thunder. Ruler of all gods and mortals.

Deity Sky, Thunder
📜

Birth of Zeus

The myth of how Zeus was saved from his father Cronus and raised in secret on Crete.

Myth Origins
⚔️

The Titanomachy

The epic war between Zeus and the Olympians against the Titans led by Cronus.

Event War
Page 1 of 5 
<div class="search-results">
    <div class="search-results-header">
        <h3>Search Results</h3>
        <span class="results-count">42 results</span>
    </div>
    <div class="results-list">
        <div class="result-item">
            <div class="result-icon">⚡</div>
            <div class="result-content">
                <h4 class="result-title">Title</h4>
                <p class="result-description">Description</p>
                <div class="result-meta">
                    <span class="result-category">Category</span>
                </div>
            </div>
        </div>
    </div>
</div>

Live Search with Suggestions

<div class="search-live">
    <div class="search-box">
        <input type="text" class="search-input" placeholder="Search...">
        <button class="search-button">🔍</button>
    </div>
    <div class="search-suggestions">
        <div class="suggestion-item">
            <span class="suggestion-icon">⚡</span>
            <span class="suggestion-text">Suggestion</span>
        </div>
    </div>
</div>