---
title: Section
---
import { Section } from "@calcom/ui/components/section"
import { RenderComponentWithSnippet } from "@/app/components/render"
import { Row } from "@/app/components/row"
import { BasicExample } from "./section.basic"
import { WithIconExample } from "./section.withIcon"
import { SubSectionExample } from "./section.subsection"

## Basic Usage

The Section component provides a structured way to organize content with a consistent visual hierarchy. It includes several subcomponents for different parts of the section.

<BasicExample/>

## With Icon

Sections can include an icon in the header to provide visual context.

<WithIconExample/>

## SubSections

Sections can contain subsections for organizing related content in a nested structure.

<SubSectionExample/>

## Components

The Section component is composed of several subcomponents:

- `Section` - The root container
- `Section.Header` - Container for the section header
- `Section.Title` - The section title
- `Section.Description` - Optional description text
- `Section.Content` - The main content area
- `Section.SubSection` - A nested section
- `Section.SubSectionHeader` - Header for a subsection
- `Section.SubSectionContent` - Content area for a subsection