Introduction

Our Header Component consists of two main sections:

• Top Bar: Includes the logo, navigation links (e.g., Rent, Buy), a light/dark mode switcher, and a bookmark button.
• Search Filter Panel: Positioned below the top bar, primarily includes dropdowns and buttons used for filtering real estate listings.

Wireframe Snapshot

For further details on the UX research and wireframing of the Search Filter Panel, refer to the following:

• Search Filter UX Research
• Wireframe for Search Filter Panel

Design System Integration

In implementing the Search Filter Panel, we utilized components from the Inked Calibri Design System:

• Dropdowns: For fields like Location, Type, and Beds/Baths.
• Buttons: Search and Filter buttons, derived from the design system’s button component.

To ensure flexibility, these components are duplicated specifically for this project’s header filter panel, allowing customizations without affecting the main design system.

List of Components Needed for the Search Filter Panel

The following components from the Inked Calibri Design System were adapted for the Search Filter Panel:

• Checkbox / Radio
• Button Component
• Input Component Elements
• Dropdown Component

This approach maintains consistency across the project while retaining flexibility for customizations specific to the real estate showcase.

Filter Panel Fields

Below are links to detailed components utilized in each field of the Search Filter Panel:

• Location Field
• Property Type Field
• Beds and Baths Field
• Price Field