---
title: Design section components
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

## Design section components

Editors use [sections](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.md#sections) to control the horizontal and vertical layout of a page. _Sections_ organize space into [widget zones](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.md#widget-zones) where editors place widgets. Think of sections as the scaffolding that holds content in place. Well-designed sections provide consistent spacing, margins, and responsive behavior without requiring editors to seek developer help.

From a design perspective, the section used for commerce pages will look very similar to a generic Page Builder section. You can find detailed guidance on section modeling in a dedicated [the guide on modeling Page Builder sections](https://docs.kentico.com/guides/architecture/content-modeling/model-website-presentation-components/model-page-builder-sections.md) material that talks about _Single column_ or _Multicolumn_ sections. We will not discuss the generic sections here.

> **Info:** **Additional section types to consider**
>
> Depending on your project's complexity, you may also need:
>
> - **Product grid** section - Flexible card/tile grid with configurable columns per breakpoint (Dropdown - Desktop: 2–6, Tablet: 2–4, Mobile: 1–2), row and column gaps, card style (Dropdown - Elevated, Flat, Bordered). Use for product grids, pet listings, and testimonial displays.
> - **Accordion** section - Collapsible content panels with properties for allowing multiple panels open, default panel state, icon style (Radio - Plus/minus, Chevron, Arrow), and border style. Use for FAQs, product specifications, and shipping information.
> - **Tab** section - tabbed content organization with tab position (Dropdown - Top, Left, Right), tab style (Radio - Pills, Underline, Boxed), default active tab, and URL anchor support for deep linking. Use for product variations, category filtering, and multi-view content.
> - **Carousel** section - sliding content panels with visible slide count (1–5), autoplay with configurable interval, navigation arrows, pagination dots, and infinite loop option. Use for featured products, testimonials, and image galleries. (Depending on the design approach, you can also store these properties on a dedicated _Carousel_ widget.)