---
title: Coveo styling sections
slug: '3294'
canonical_url: https://docs.coveo.com/en/3294/
collection: build-a-search-ui
source_format: adoc
---
# Coveo styling sections
Within your [search interface](https://docs.coveo.com/en/2741/), 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`](https://coveo.github.io/search-ui/components/searchinterface.html) 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:



## Reference

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


<div class='table-wrap'>
<table>
    <thead>
      <th>Class name</th>
      <th>Components</th>
    </thead>
    <tbody>
      <tr>
        <td><code>coveo-tab-section</code></td>
        <td><ul>
          <li><a href="https://coveo.github.io/search-ui/components/tab.html" target="_blank"><code>CoveoTab</code></a></li>
        </ul></td>
      </tr>
      <tr>
        <td><code>coveo-search-section</code></td>
        <td><ul>
          <li><a href="https://coveo.github.io/search-ui/components/searchbox.html" target="_blank"><code>CoveoSearchbox</code></a></li>
          <li><a href="https://coveo.github.io/search-ui/components/settings.html" target="_blank"><code>CoveoSettings</code></a></li>
        </ul></td>
      </tr>
      <tr>
        <td><code>coveo-main-section</code></td>
        <td>All components that are to appear under the search box</td>
      </tr>
      <tr>
        <td><code>coveo-facet-column</code></td>
        <td><ul>
          <li><a href="https://coveo.github.io/search-ui/components/facet.html" target="_blank"><code>CoveoFacet</code></a></li>
          <li><a href="https://coveo.github.io/search-ui/components/dynamicfacet.html" target="_blank"><code>CoveoDynamicFacet</code></a></li>
          <li><a href="https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html" target="_blank"><code>CoveoDynamicHierarchicalFacet</code></a></li>
          <li><a href="https://coveo.github.io/search-ui/components/categoryfacet.html" target="_blank"><code>CoveoCategoryFacet</code></a></li>
          <li><a href="https://coveo.github.io/search-ui/components/simplefilter.html" target="_blank"><code>CoveoSimpleFilter</code></a></li>
        </ul></td>
      </tr>
      <tr>
        <td><code>coveo-results-column</code></td>
        <td>All components that are to appear in the same column as the results</td>
      </tr>
      <tr>
        <td><code>coveo-results-header</code></td>
        <td>All components that are to appear in the header of the results column</td>
      </tr>
      <tr>
        <td><code>coveo-summary-section</code></td>
        <td><ul>
          <li><a href="https://coveo.github.io/search-ui/components/querysummary.html" target="_blank"><code>CoveoQuerySummary</code></a></li>
          <li><a href="https://coveo.github.io/search-ui/components/querysummary.html" target="_blank"><code>CoveoQueryDuration</code></a></li>
        </ul></td>
      </tr>
      <tr>
        <td><code>coveo-result-layout-section</code></td>
        <td><ul>
          <li><a href="https://coveo.github.io/search-ui/components/resultlayoutselector.html" target="_blank"><code>CoveoResultLayoutSelector</code></a></li>
        </ul></td>
      </tr>
      <tr>
        <td><code>coveo-sort-section</code></td>
        <td><ul>
          <li><a href="https://coveo.github.io/search-ui/components/sort.html" target="_blank"><code>CoveoSort</code></a></li>
        </ul></td>
      </tr>
    </tbody>
  </table>
</div>