Configuration

---

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".

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

---

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

---

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

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".

---

Blur effect [px] (Backdrop)

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 value for the blur effect of the backdrop.