InstantSearch specs

✏️ edit page

Highlight

Widget example

This is the highlighted text

HTML output

<span class="ais-Highlight"><span class="ais-Highlight-nonHighlighted">This is the</span> <mark class="ais-Highlight-highlighted">highlighted text</mark></span>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-Highlight the root span of the widget
.ais-Highlight-highlighted the highlighted text
.ais-Highlight-nonHighlighted the normal text

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
highlightTag mark DOM tag to use for the highlighted parts, in addition to the classes

Translations

Note: there are no translations for this widget