---
title: Toggle Between a List and a Card Result Layout
slug: '2508'
canonical_url: https://docs.coveo.com/en/2508/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Toggle Between a List and a Card Result Layout
> **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.

Now that you have learned how to add Result Templates to your search page, you're ready to learn how to change the result layout itself (see [JavaScript Search Framework result layouts](https://docs.coveo.com/en/360/)).

While your results are currently presented as a list, you can decide to present them as cards instead, displaying results in a two dimensional grid.

Coveo Hive offers a default option to change between a card and a list layout directly on the property of the component, so that users can change it according to their preference.

. In the Sitecore **Experience Editor**, in the ribbon at the top of the page, click ![Add-a-new-component](c4sc-v5/37103748.png) to reveal the places where you can insert new components.
. Underneath your current result list, select **Add here**.
. In the **Select a Rendering** window, select the **Coveo Results List** rendering.
. In the **Select the Associated Content**, select **Create a New Content**.
You shouldn't reuse the same Data Source as your previous result list.
. Save your page.
. Click the result list you just added, and click the Coveo icon to open the properties window.
. In the properties window, under **Basic Settings** > **Results Layout**, select **Card**, and select **OK** to save your properties.
. On your search page, select your **Coveo Query Summary** component, and click the parent component button to get to the `results-header` rendering.
. Select **Add here**.
. In the **Select a Rendering** window, select **Results Header Section**.
. Next to the Results Header Section, select **Add here**.
. In the **Select a Rendering** window, select **Results Layout Section**.
. In the `result-layout` rendering, select **Add here**.
. In the **Select a Rendering** window, select **Coveo Result Layout**.
. Save your page.

You should now be able to switch between a card and a list layout for your results.

![Screenshot of a Coveo search page showing the list and card buttons](https://docs.coveo.com/en/assets/images/c4sc-v5/37103835.png)