> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Section

Defines a page layout with margins, page size, headers, and footers.

```tsx theme={"dark"}
<Section>
  <Paragraph>Content</Paragraph>
</Section>
```

***

## Props

| Prop        | Type              | Description                     |
| ----------- | ----------------- | ------------------------------- |
| `children`  | `ReactNode`       | Content, headers, footers       |
| `margins`   | `MarginOptions`   | Page margins                    |
| `pageSize`  | `PageSizeOptions` | Page dimensions and orientation |
| `className` | `string`          | Tailwind classes                |

***

## Margins

```tsx theme={"dark"}
<Section
  margins={{
    top: "1in",
    bottom: "1in",
    left: "1.25in",
    right: "1.25in",
    header: "0.5in",
    footer: "0.5in",
    gutter: "0.5in",  // Extra margin for binding
  }}
>
```

Defaults: 1 inch on all sides, 0.5 inch for header/footer, 0 for gutter.

***

## Page size

```tsx theme={"dark"}
// Letter (default)
<Section pageSize={{ width: "8.5in", height: "11in" }}>

// A4
<Section pageSize={{ width: "210mm", height: "297mm" }}>

// Landscape
<Section pageSize={{ orientation: "landscape" }}>

// Custom
<Section pageSize={{ width: "6in", height: "9in" }}>
```

***

## Units

Margins and page sizes accept:

* `1` or `"1in"` (inches)
* `"2.5cm"` (centimeters)
* `"25mm"` (millimeters)
* `"72pt"` (points)
* `"10%"` (percentage of page dimension)

***

## Headers and footers

```tsx theme={"dark"}
<Section>
  <Section.Header>
    <Paragraph className="text-right text-sm text-gray-500">
      My Document
    </Paragraph>
  </Section.Header>

  <Section.Footer>
    <Paragraph className="text-center text-xs">
      Page <PageNumber type="current" /> of <PageNumber type="total" />
    </Paragraph>
  </Section.Footer>

  <H1>Content</H1>
  <Paragraph>Goes here</Paragraph>
</Section>
```

Headers and footers can contain paragraphs, headings, text, and page numbers.

***

## Page numbers

```tsx theme={"dark"}
<PageNumber type="current" />     // Current page
<PageNumber type="total" />       // Total pages
<PageNumber type="both" />        // "1 of 10"
<PageNumber type="both" format="Page {current} of {total}" />
```

***

## Multiple sections

Each section starts on a new page with its own settings:

```tsx theme={"dark"}
<Document>
  {/* Title page - larger margins, no header */}
  <Section margins={{ top: "3in", left: "2in" }}>
    <H1 className="text-center">Report Title</H1>
  </Section>

  {/* Main content - standard margins with header/footer */}
  <Section margins={{ top: "1in" }}>
    <Section.Header>
      <Paragraph className="text-gray-500">Report Title</Paragraph>
    </Section.Header>

    <Section.Footer>
      <Paragraph className="text-center">
        <PageNumber type="current" />
      </Paragraph>
    </Section.Footer>

    <H1>Chapter 1</H1>
    <Paragraph>Content...</Paragraph>
  </Section>

  {/* Appendix - landscape for wide tables */}
  <Section pageSize={{ orientation: "landscape" }}>
    <H1>Appendix</H1>
    <Table>...</Table>
  </Section>
</Document>
```

***

## Full example

```tsx theme={"dark"}
import {
  Document,
  Section,
  H1,
  Paragraph,
  PageNumber,
} from "@cordel/react-docx";

const Report = () => (
  <Document styles={{ defaultFont: { name: "Calibri", size: 11 } }}>
    <Section
      margins={{
        top: "1in",
        bottom: "1in",
        left: "1.25in",
        right: "1in",
        header: "0.5in",
        footer: "0.5in",
      }}
      pageSize={{ width: "8.5in", height: "11in" }}
    >
      <Section.Header>
        <Paragraph className="text-right text-gray-500 text-sm">
          Quarterly Report (Q4 2024)
        </Paragraph>
      </Section.Header>

      <Section.Footer>
        <Paragraph className="text-center text-gray-400 text-xs">
          Confidential (Page <PageNumber type="current" />)
        </Paragraph>
      </Section.Footer>

      <H1>Quarterly Report</H1>
      <Paragraph>Content goes here...</Paragraph>
    </Section>
  </Document>
);
```