Search

The search component allows users to quickly find content across the application. It includes a search input and result list with navigation capabilities.

States

Default

With Placeholder

Search Results

With Results List

Renewable Energy Solutions
Carbon Footprint Reduction
Water Conservation Strategies
Circular Economy Practices
Green Building Certifications
View All Results

Best practices

  • Use clear, descriptive placeholder text to guide users
  • Display results in a clean, scannable list format
  • Include relevant icons to help users identify result types
  • Provide a "View All Results" option when there are many results
  • Show results immediately as users type for better UX

Result Options

Solar Power Integration
Sustainable Supply Chain
Climate Action Initiatives

Clear Structure

Energy Efficiency Programs
Waste Management Systems
Water Conservation Strategies
Do
  • Search components should:
    • Have clear, visible search icons
    • Provide helpful placeholder text that describes what can be searched
    • Show results with consistent formatting and clear hierarchy
    • Include navigation arrows or indicators for interactive results

Without Icons

Generic sustainability result
Another generic result
Don't
  • Don't use search without a visible search icon - it should be immediately recognizable.
  • Don't overcrowd results with too much information. Keep them scannable.
  • Don't forget to provide visual feedback for interactive elements like result items.