This content is archived. See latest version here

Last updated: Nov 16 2015

Customized search block styling guide

This topic provides an example of how to apply styling to a customized search block, available after installing Episerver Find.

How it works

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.


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">
            <a href="url 1" class="find-custom-search-block__list__title">Title</a>
            <p class="find-custom-search-block__list__description">Description</p>
Resulting block rendering:

sample customized search block

See also: Customized Search Block in Episerver Find

Do you have feedback on this documentation? Send an email to For development-related questions and discussions, refer to our Forums on