Coveo styling sections

This is for:

Developer

In this article

Layout
Reference

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, that is, 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`	`CoveoTab`
`coveo-search-section`	`CoveoSearchbox` `CoveoSettings`
`coveo-main-section`	All components that are to appear under the search box
`coveo-facet-column`	`CoveoFacet` `CoveoDynamicFacet` `CoveoDynamicHierarchicalFacet` `CoveoCategoryFacet` `CoveoSimpleFilter`
`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`	`CoveoQuerySummary` `CoveoQueryDuration`
`coveo-result-layout-section`	`CoveoResultLayoutSelector`
`coveo-sort-section`	`CoveoSort`