Understanding the Coveo Styling Sections

Within your search interface, there are various div elements that function as styling sections. In other words, they group content and render it in a particular way. Styling sections are nested inside the CoveoSearchInterface component and can be identified by their class names, which are in lowercase and have their words separated by hyphens.

Typically, components that have a fixed location or that don’t render anything can be placed anywhere inside the CoveoSearchInterface component, i.e., in any styling section or even outside of all of them. However, most components that render visual content must be placed within particular styling sections. For example, if there’s no coveo-facet-column, you won’t be able to place a facet anywhere when using the UI View. In a case like this, you’d need to add that styling section using the Code View.

Layout

The following diagram shows the layout of the styling sections as they appear on the default hosted search page:

Diagram of Coveo Styling Sections Layout

Reference

The following table serves as a reference as to which components can be placed in a given section.

Class name Components
coveo-tab-section
coveo-search-section
coveo-main-section All components that are to appear under the search box
coveo-facet-column
coveo-results-column All components that are to appear in the same column as the results
coveo-results-header All components that are to appear in the header of the results column
coveo-summary-section
coveo-result-layout-section
coveo-sort-section
Recommended Articles