---
title: Modular Frame 3 Columns
slug: '3032'
canonical_url: https://docs.coveo.com/en/3032/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Modular Frame 3 Columns
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

![Coveo for Sitecore Specific Rendering](c4sc-v5/sitecore-20-px-new.png)
 The **Modular Frame 3 Columns** creates an HTML layout containing only high-level placeholders similar to the [Modular Frame](https://docs.coveo.com/en/3031/), but splits the layout into three columns to allow [content recommendations](https://docs.coveo.com/en/1016/) to be placed next to the results list.

## Usage notes


<div>
  <ul>
    <li>Adding the <strong>Coveo Search Interface</strong> rendering is a prerequisite to the insertion of the <strong>Modular Frame 3 Columns</strong> rendering.</li>
  </ul>
</div>
<div>
  <h2 id="insertion-location">Insertion Location</h2>
  <h3>Coveo Hive</h3>
  <p>The <strong>Modular Frame 3 Columns</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">UI Content</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/modular-frame3-columns-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Modular Frame 3 Columns</strong> rendering.
  </div>

  <h3>Coveo Hive SXA</h3>
  <p>The Coveo for Sitecore SXA package doesn't include frames and SXA sites are incompatible with the non-SXA Coveo Hive frame renderings. To position and size your Coveo for Sitecore SXA renderings, use Sitecore page structure renderings in combination with the SXA grid system.</p>

  <h2 id="data-source-options">Data Source Options</h2>
  <p>The <strong>Modular Frame 3 Columns</strong> rendering has no data source options.</p>
  <h2 id="sample-generated-html-and-corresponding-visual-output">Sample Generated HTML and Corresponding Visual Output</h2>
  <p><strong>Generated HTML</strong>:</p>
  <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div&gt;</span>
    <span class="c">&lt;!-- Content from renderings inserted in the Header Section placeholder --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"coveo-main-section coveo-main-section-with-recommendations"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"coveo-header"</span><span class="nt">&gt;</span>
            <span class="c">&lt;!-- Content from renderings inserted in the UI Header placeholder --&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="c">&lt;!-- Content from renderings inserted in the Main Section placeholder --&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"coveo-footer"</span><span class="nt">&gt;</span>
            <span class="c">&lt;!-- Content from renderings inserted in the UI Footer placeholder --&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="c">&lt;!-- Content from renderings inserted in the Footer Section placeholder --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>  </div>
  <p><strong>Placeholder layout</strong>:</p>
  <p><img src="{{ site.baseurl }}/assets/images/c4sc-v5/column-frame-layout.png" alt="Default Frame Layout | Coveo for Sitecore 5" class="border" /></p>
</div>