Section

The Section component is used for page content sections, supporting different padding, backgrounds, and spacing.

Basic Section

默认区块

内容将被包裹在一个合适的区块中

---
/**
 * @component SectionBasic
 * @description Section 组件基础用法示例
 */
import { Section } from '@coffic/cosy-ui';
---

<Section>
  <h2>默认区块</h2>
  <p>内容将被包裹在一个合适的区块中</p>
</Section>

Custom Section

自定义区块

大内边距，灰色背景，内容居中，带边框

---
/**
 * @component SectionCustom
 * @description Section 组件自定义用法示例
 */
import { Section } from '@coffic/cosy-ui';
---

<Section padding="lg" background="gray" centered={true} border={true}>
  <h2>自定义区块</h2>
  <p>大内边距，灰色背景，内容居中，带边框</p>
</Section>