Heros search bar
Description
This page illustrates options for 'Heros search bar'.
Mandatory features
- Search bar
Optional features
- Title
- Inline links
- Title for links
- Links
- Hero height
- Default (450px)
- Fit-content
- Search bar positioning
- Default (Left)
- Right
- Center
- Search button
- Default (icon only)
- Icon hightlighted
- Media
- Image
- Background video
- Background color
- Primary
- Secondary
- Third party intregrations
- Raffel
Default (Positioned left)
Default with title
Default with title & search suggestions
Positioned right with optional title, links & hightlight btn
Right aligned with title
Right aligned with title & search suggestions
Positioned center with optional title, links & hightlight btn
Hero search centered with title
Hero search centered with title & search suggestions
Hero search centered with title
Small variation
Left aligned
Right aligned
Background color
Hero search bar - raffle
Important. When using Raffle search bar, use class "overflow--unset" on the container div.
Default with title & raffle search
Hero search bar - autocomplete suggestion box
Default with title & autocomplete suggestion box
Default with title & sound input
