# Section

```ts
import { Section } from 'cx/widgets';
```

Sections are used to divide a larger body into distinct parts. A section optionally may have a header (title) and a footer.

<Note>
Section predates Tailwind CSS and is rarely used when Tailwind is available. Consider using Tailwind's card utilities instead.
</Note>

```tsx
import { Button, FlexRow, Heading, Section } from "cx/widgets";
import "../../icons/lucide";

export default (
  <div className="flex flex-col gap-4">
    <Section mod="card" title="Simple Section">
      This is a simple section with a title and some content.
    </Section>

    <Section mod="card" title="Section with Footer">
      This section has a footer with action buttons.
      <FlexRow putInto="footer" spacing>
        <Button mod="hollow" icon="calendar" />
        <Button mod="hollow" icon="calculator" />
        <Button mod="hollow" icon="search" />
      </FlexRow>
    </Section>

    <Section mod="card">
      <FlexRow align="start" putInto="header">
        <Heading level={4} className="text-blue-400">
          Custom Header
        </Heading>
        <Button mod="hollow" icon="x" style="margin-left: auto" />
      </FlexRow>
      This section has a custom header with a close button.
    </Section>
  </div>
);

```

## Mods

```tsx
import { Section } from "cx/widgets";

export default (
  <div className="grid grid-cols-2 gap-4">
    <Section mod="primary" title="mod=primary">
      Primary style with blue background.
    </Section>

    <Section mod="success" title="mod=success">
      Success style with green background.
    </Section>

    <Section mod="warning" title="mod=warning">
      Warning style with orange background.
    </Section>

    <Section mod="error" title="mod=error">
      Error style with red background.
    </Section>
  </div>
);

```

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `title` | `string` | Section's title text. |
| `header` | `config` | Custom content for the header. Use `putInto="header"` on child elements. |
| `footer` | `config` | Custom content for the footer. Use `putInto="footer"` on child elements. |
| `pad` | `boolean` | Add default padding to the section body. Default is `true`. |
| `mod` | `string` | Visual modifier. Values: `card`, `primary`, `success`, `warning`, `error`. |
| `hLevel` | `number` | Heading level for the title. Default is `3`. |
| `headerStyle` | `string \| object` | Custom style for the header. |
| `headerClass` | `string \| object` | Additional CSS class for the header. |
| `bodyStyle` | `string \| object` | Custom style for the body. |
| `bodyClass` | `string \| object` | Additional CSS class for the body. |
| `footerStyle` | `string \| object` | Custom style for the footer. |
| `footerClass` | `string \| object` | Additional CSS class for the footer. |
| `baseClass` | `string` | Base CSS class. Default is `section`. |