Area: Optimizely Search & Navigation
ARCHIVED This content is retired and no longer maintained. See the latest version here.

Recommended reading 

Customized search block styling guide

This page provides an example of how to apply styling to a customized search block, available after installing EPiServer Find. 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 find this information helpful? Please log in to provide feedback.

Last updated: Sep 21, 2015

Recommended reading