073faf9e10
* section component * more section UI * wip * core components styled * all components using sections * match icons to figma * small inputs * fix select small to be the same as small text * center flex rows * enforce inputs to be full spanning grid * tidy up section container for single inputs * fix select and i18n * wip * install available apps * raw heading * app install card * fix app logos width x height * fix gap * match design for other button * fix prop name * push i18n string * fix doc snippets * fix docs * chore: remove yarn.lock changes --------- Co-authored-by: Udit Takkar <udit222001@gmail.com>
41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
---
|
|
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
|