Components
Search Block
An easy to use search component.
Edited 2 years ago
Desktop
Input Select Pressed
Input
Outline Border: $outline_border_thin
Border Rádios: $border_radios_small
Border Color: $color_secondary_medium
Color Backgroud: $color_netral_lightest
Typography
$font_family_2
$font_size_XXS
$font_line_height_short
$font_spacing_defaut
Label text
$font_weight_bold
$color_secondary_medium
Placeholder text
$font_weight_regular
$color_neutral_medium
$color_neutral_dark
Icon
-arrow down
Input Search Activated
Input
Height: 53px
Outline Border: $outline_border_thin
Border Rádios: $border_radios_small
Border Color: $color_neutral_medium
Color Backgroud: $color_neutral_lightest
Typography
$font_family_2
$font_size_XXS
$font_line_height_short
$font_spacing_defaut
Label text
$font_weight_bold
$color_ neutral_dark
Placeholder text
$font_weight_regular
$color_neutral_dark
Icon
-search
Input Text Area Activated
Input
Height: 208px
Outline Border: $outline_border_thin
Border Rádios: $border_radios_small
Border Color: $color_neutral_medium
Color Backgroud: $color_neutral_lightest
Typography
$font_family_2
$font_size_XXS
$font_line_height_short
$font_spacing_defaut
Label text
$font_weight_bold
$color_ neutral_dark
Placeholder text
$font_weight_regular
$color_neutral_medium
Mobile
Step by Step
Layout Canvas Structure:
1. At the page where you wish to add the Search Block component, click the + button on the Layout Canvas;
2. Search the Search Block component on the list, it is located in the "Structure Component" category;
3. Drag and drop the component inside the canvas, and make sure to put it exactly where you wish to place it.
4. This component does not have any user-editable settings.
