Show search
Field type:
Select
Available values:
• don't show
• show
Example value:show
Path to the configuration:
Tab "Header" => Block "Search"
Technical name:twt-header-search-show
Basic configuration
Layout type
Field type:
Select
Available values:
• Input (default)
• Flyout search
• Fullscreen search
• Global Search @Desktop (only available with "Header 1.1")
Example value:Input (default)
Path to the configuration:
Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:twt-header-search-type
Input (default)
Available in "Header 1.1" and "Header 1.2".
Flyout search / Fullscreen search
Available in all headers.
Must be selected for "Header 2.1" and "Full-width sticky header".
Global Search
Available in "Header 1.1" in the desktop viewport. Use the color: "Layout" > "Background colour (Action buttons)".
Corner type
Field type:
Select
Available values:
• not rounded (default)
• round corners
• individual radius
Example value:not rounded (default)
Path to the configuration:
Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:twt-header-search-input-corner-type
rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Uses a predefined radius for round corners.
Border radius (individual radius)
Field type:
Number field
Example value:10
Path to the configuration:
Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:twt-header-search-input-border-radius
Note: This configuration relates to the corner type "individual radius".
Layout type (Button)
Field type:
Select
Available values:
• attached
• integrated
Example value:attached
Path to the configuration:
Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:twt-header-search-btn-layout-type
attached
The button joins the input field on the right.
integrated
The button sits inside the input field, which runs on behind it. Its corners follow the configuration "Corner type".
Note: Applies to the layout types "Input field" and "Global search".
Colour configuration
Text colour (Input)
Field type:
Color picker
Example value:#333333
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-input-color
Border colour (Input)
Field type:
Color picker
Example value:#e4e7ea
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-input-border-color
Background colour (Input)
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-input-background-color
Icon colour (Button)
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-btn-icon-color
Icon colour (Button) @hover
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-btn-icon-color-hover
Border colour (Button)
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-btn-border-color
Border colour (Button) @hover
Field type:
Color picker
Example value:mix(black, $sw-color-brand-primary, 15%)
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-btn-border-color-hover
Background colour (Button)
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-btn-background-color
Background colour (Button) @hover
Field type:
Color picker
Example value:mix(black, $sw-color-brand-primary, 15%)
Path to the configuration:
Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:twt-header-search-btn-background-color-hover
Typography
Text alignment
Field type:
Select
Available values:
• align left
• align center
• align right
Example value:align left
Path to the configuration:
Tab "Header" => Block "Search" => Section "Typography"
Technical name:twt-header-search-text-align
Layout type 'Input'
Maximum width
Field type:
Text field
Example value:500
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Input'"
Technical name:twt-header-search-max-width
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Maximum width @Desktop (≥1200px)
Field type:
Text field
Example value:100%
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Input'"
Technical name:twt-header-search-width-desktop
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Layout type 'Flyout search'
Width
Field type:
Select
Available values:
• Container-max-width (Full-width-boxed)
• 100% (Full-width)
Example value:Container-max-width (Full-width-boxed)
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:twt-header-search-flyout-container-width
Maximum width @Phone (landscape) (≥576px)
Field type:
Text field
Example value:500
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:twt-header-search-flyout-max-width
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Maximum width @Desktop (≥1200px)
Field type:
Text field
Example value:100%
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:twt-header-search-flyout-max-width-desktop
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Padding
Field type:
Number field
Example value:15
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:twt-header-search-flyout-padding
Option "Flyout search" in "Search" > "Layout type" must be selected.
Background colour @Phone (<576px)
Field type:
Color picker
Example value:#eef2f5
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:twt-header-phone-search-flyout-background-color
Background colour
Field type:
Color picker
Example value:#eef2f5
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:twt-header-search-flyout-background-color
Option "Flyout search" in "Search" > "Layout type" must be selected.
Layout type 'Fullscreen search'
Backdrop colour
Field type:
Color picker
Example value:rgba(0, 0, 0, 0.9)
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"
Technical name:twt-header-search-fullscreen-backdrop-color
Select the desired background colour of the backdrop.
The option "Fullscreen search" must be selected as the "Layout type".
Glass effect [px] (overlay)
Field type:
Number field
Example value:0
Path to the configuration:
Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"
Technical name:twt-header-search-fullscreen-backdrop-effect-blur
Enter the desired strength for the blur effect of the overlay (backdrop).