---
title: "Creating sections with nested card components"
date: "2022-03-24T15:47:18+00:00"
summary: "Learn how to create dynamic layouts using UIKit's section components with nested cards. Discover step-by-step instructions for adding, arranging, and customizing card layouts for responsive designs across devices."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-sections-nested-card-components"
id: "a2ba024c-ac37-49cf-8e48-b9a7d786d699"
---

The UIKit include two section components that can contain nested Card components. These are the **Text and card container section** and the **Card container section**.

To use these sections, first drag one onto your page. The visual below shows the **Card container section** added to the page. You will see that it includes a drop zone for adding cards.

![9c2b6287-card-container.png](https://acquia.widen.net/content/40e3fe8e-08d6-4509-aa4c-1e76a551d4d5/web/9c2b6287-card-container.png)

Then drag a card into the drop zone. The visual below shows a **Content card** added to the drop zone. 

![f0330f4e-card-added-to-container.png](https://acquia.widen.net/content/607c275e-67cb-4fdc-9e01-535eaf8ab201/web/f0330f4e-card-added-to-container.png)

To add another card, drag it into the approximate area of the first card. You will see the border of the drop zone is displayed and a grey placeholder which indicates where the card will be placed.

![4fb9fb7b-adding-second-card-to-container.png](https://acquia.widen.net/content/b31a0e99-5c46-49ed-9c4e-95c15bf87501/web/4fb9fb7b-adding-second-card-to-container.png)

Once placed, you can change the number of cards shown in each row of the Card container.

1.  Open the settings of the Card container
2.  Click on the **Layout and style tab**
3.  Within the **Card layout** section of the form, select the number of cards you want to show in each row.
4.  Click **Apply.**

The setting is available for each device width so that you can adjust the number of cards to show in each row by device. 

![c013b6f4-setting-cards-in-row.png](https://acquia.widen.net/content/f2c24a2d-2e5e-4f28-ab20-80426a45e657/web/c013b6f4-setting-cards-in-row.png)

Setting the Card section to **4 cards per row on desktop** would result in the following layout.

![c08da70e-four-cards-in-row.png](https://acquia.widen.net/content/f68eecbd-6691-46ef-8532-b8a742535f62/web/c08da70e-four-cards-in-row.png)