Loading...
Area: Episerver Search & Navigation
Applies to versions: 12 and higher
Other versions:

Customized search block

Recommendations [hide]

This topic describes the customized search block developed for the integration of Episerver Search & Navigation (formerly Episerver Find) with Episerver CMS. The block is used for example to display related content on websites.

How it works

The block is available as a NuGet package for installation as part of the Episerver CMS integration with Search & Navigation.

The feature lets editors create a block based on search criteria that they define. The resulting block displays content that satisfies the search criteria as a list of links with optional descriptions and a heading.

See Customized search block.

Styling of the block

Each part of the block rendering has its own CSS class. Below is a schematic example of the block's rendering, demonstrating all available CSS classes.

<div class="find-custom-search-block">
  <h2 class="find-custom-search-block__header">List Header</h2>
  <ul class="find-custom-search-block__list">
    <li>
      <a href="url 1" class="find-custom-search-block__list__title">Title</a>
      <p class="find-custom-search-block__list__description">Description</p>
    </li>
    ... 
  </ul>
</div>
Resulting block rendering:

sample customized search block

Do you find this information helpful? Please log in to provide feedback.

Last updated: Oct 31, 2016

Recommendations [hide]