Use this page to find stable selectors for search UI customization.
- Start from root markers (
data-kea-version, root class kea-search).
- Then target block markers (
data-kea-component, data-kea-role).
- Use interaction/state markers (
data-kea-action, data-kea-selected) for behavior-specific styling.
Note: All markers listed in this catalog are emitted by the
storefront runtime. For broad styling, prefer the class
composition (.kea-search--{mode} / .kea-screen-{screen} /
data-kea-columns / data-kea-card-type) where one is available.
Use the data-attribute form (for example data-kea-mode,
data-kea-screen) only for fine-grained per-view targeting.
The “Use in CSS?” column marks names you can target in theme CSS.
These markers are on the root search wrapper (.kea-search).
| Marker |
Use in CSS? |
Known values |
Use case |
data-kea-version |
yes |
2 |
Target Kea v2 specifically. |
.kea-search class |
yes |
(single class) |
Root search wrapper selector. |
.kea-search--{mode} class |
yes |
widget, classic, combined |
Experience-mode differences. |
.kea-search-canvas class |
yes |
(single class) |
Inner canvas layout container. |
.kea-screen-{screen} class |
yes |
empty, results, noResults, unknown |
Screen-state styling (empty vs results). |
data-kea-view |
yes |
search_box, search_dropdown, results_page, unknown |
Emitted on the root wrapper. For broad styling, prefer the .kea-search / .kea-search--{mode} composition. Use data-kea-view for fine-grained per-view targeting. |
data-kea-screen |
yes |
empty, results, noResults, unknown |
Emitted on the root wrapper. The class form .kea-screen-{screen} carries the same information. |
data-kea-mode |
yes |
widget, classic, combined, unknown |
Emitted on the root wrapper. The class form .kea-search--{mode} carries the same information. |
data-kea-layout |
yes |
text, visual, unknown |
Emitted on the root wrapper for layout-specific styling. |
data-kea-breakpoint |
yes |
sm, md, lg, xl, unknown |
Emitted on the root wrapper for breakpoint-aware CSS targeting. |
data-kea-preview |
yes |
"true", "false" |
Emitted on the root wrapper for preview-only visual diagnostics. |
| Marker |
Use in CSS? |
Common values / format |
Typical target |
data-kea-component |
yes |
input, section, stack, columns, products |
Block-level styling without deep DOM chains. |
data-kea-columns |
yes |
Integer string (for columns and products) |
Grid density and spacing rules. |
data-kea-column |
yes |
Integer string (1, 2, …) |
Column-specific alignment/margins. |
data-kea-card-type |
yes (on products wrapper) |
standard, horizontal, simple (preset) plus custom values from your template config |
Declared card type used for the grid scope. |
| Marker |
Use in CSS? |
Known values / format |
Typical target |
data-kea-role="facet-group" |
yes |
(fixed) |
Group container styling. |
data-kea-role="facet-option" |
yes |
(fixed) |
Per-option styling. Equivalent to .kea-facets__option class. |
data-kea-facet-key |
yes |
Dynamic facet key (for example brand/color/price) |
Facet-group-specific styles. |
data-kea-facet-value |
yes (type-dependent) |
Dynamic facet value string |
Value-level chips/swatches styling. |
data-kea-selected |
yes (type-dependent) |
"true", "false" |
Selected-state visuals. |
.kea-facets__option class |
yes |
(single class) |
Per-option styling. Equivalent to [data-kea-role="facet-option"]. |
| Marker |
Use in CSS? |
Known values |
Notes |
data-kea-action |
yes |
product.open, visual.similar |
Emitted on the product-card click and similar-product zones. |
data-kea-action |
yes |
visual.search_from_product |
Emitted on the simple product-card search action when the runtime capability is available. |
data-kea-action |
yes |
facet.toggle |
Emitted on every per-option facet row. |
data-kea-action |
yes |
product.add_to_cart |
Emitted on the standard product card’s add-to-cart button. |
| Marker |
Known values / format |
Use case |
data-kea-role="product-card" |
Fixed |
Primary wrapper selector for card-level customization. |
data-kea-product-id |
Dynamic product id |
Product-specific diagnostic selectors (not visual theming). |
data-kea-position |
Numeric position. Position can change after sorting, filtering, pagination, or layout changes. |
Positional experiments/testing hooks. Do not use it for visual theming. |
data-kea-source |
autocomplete, results, visual, unknown |
Source-specific card styling. |
data-kea-template-card |
"true" (template rendering path) |
Distinguish template-card rendering from standard card path. |
If a marker is not listed on this page, treat it as unsupported for production customization.
- All markers in this catalog are currently emitted by the storefront
runtime. The Use in CSS? column flags the names that are safe to
target in production customizations.
- Where both a class form and a
data-kea-* attribute form carry the
same information (for example .kea-search--{mode} and
data-kea-mode), the class form is the recommended choice for
broad styling. Use the data-attribute form only when you need a
fine-grained override that the class composition cannot express.
