# Section

A named document section with a compact heading, supporting description and optional actions.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Section, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Section title="Project settings" description="Manage details your team shares." headingLevel={2}>
        <Text as="p">Section content.</Text>
      </Section>
    </FloodRoot>
  );
}
```

## Design notes

- Section renders a native section and heading. A generated heading ID labels the region; explicit id creates a deterministic heading ID. headingLevel follows the host document hierarchy.
- The title and description share a close text column; actions align separately and wrap when necessary. It adds no surface or border. Compose Surface or another container inside when content needs its own background.
- Original compatible addition in the unpublished 0.2.5 source candidate.
- headingLevel chooses h2–h6 for the document outline; it does not set the visual scale. headingSize independently selects the existing Heading typography role (section by default).

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `title` | `string` | `Required` |
| `description` | `ReactNode` | `—` |
| `actions` | `ReactNode` | `—` |
| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `2` |
| `headingSize` | `"display" \| "large" \| "page" \| "section"` | `"section"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLElement>, "title">` | `Forwarded` |