Configuration


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


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


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

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


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


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


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


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


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


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


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

Last updated

Was this helpful?