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

---

Width @Desktop (≥1200px)

Field type: Text field

Example value: 100%

Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"

Technical name: twt-header-search-width-desktop

---

Maximum width (Input)

Field type: Text field

Example value: 500

Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"

Technical name: twt-header-search-max-width

---

Padding (Flyout search)

Field type: Number field

Example value: 15

Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"

Technical name: twt-header-search-flyout-padding

Option "Flyout search" in "Search" > "Layout type" must be selected.

---

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

---

Background colour (Flyout search)

Field type: Color picker

Example value: #eef2f5

Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"

Technical name: twt-header-search-flyout-background-color

Option "Flyout search" in "Search" > "Layout type" must be selected.

---

Background colour (Flyout search) @Phone (<576px)

Field type: Color picker

Example value: #eef2f5

Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"

Technical name: twt-header-phone-search-flyout-background-color

---

Background colour (Fullscreen search)

Field type: Color picker

Example value: rgba(0, 0, 0, 0.9)

Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"

Technical name: twt-header-search-fullscreen-background-color

Option "Fullscreen search" in "Search" > "Layout type" must be selected.

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