# Section

A named part of a page, with an optional separator line `semantic.dimension.space.gap.large` (24px) below its content. Section adds no border, padding, or width cap.

```tsx
// demo.tsx
import {Heading, Section, Stack, Text} from '@earendil-works/elanor-react';

export default function SectionDemo() {
  return (
    <Section.Root aria-labelledby="members-heading">
      <Section.Content>
        <Stack gap="small">
          <Heading level={2} id="members-heading">
            Members
          </Heading>
          <Text>Invite collaborators and assign workspace roles.</Text>
        </Stack>
      </Section.Content>
      <Section.Separator />
    </Section.Root>
  );
}
```

## Usage

```tsx
import {Heading, Section} from '@earendil-works/elanor-react';

<Section.Root aria-labelledby="members-heading">
  <Section.Content>
    <Heading level={2} id="members-heading">
      Members
    </Heading>
  </Section.Content>
  <Section.Separator />
</Section.Root>;
```

Root renders a `section`; name it with its heading through `aria-labelledby`. Content renders a `div`; lay out its children with [Stack](/components/stack.md) or [Grid](/components/grid.md). Leave out Separator for no line.

## Separator span

The separator sits in its own 12-column grid with default gutters. `span` sets how many tracks it covers, optionally per container breakpoint. To align content with a shorter line, use a 12-column Grid with default gutters inside Content, as in this demo.

The separator's grid measures its own width, not the parent's tracks. For shared tracks, compose [Separator](/components/separator.md) and Grid yourself.

```tsx
// separator-span.tsx
import {Grid, Heading, Section, Stack, Text} from '@earendil-works/elanor-react';

export default function SectionSeparatorSpan() {
  return (
    <Section.Root aria-labelledby="access-heading">
      <Section.Content>
        <Grid.Root>
          <Grid.Item span={{base: 'full', small: 6}}>
            <Stack gap="small">
              <Heading level={3} id="access-heading">
                Project access
              </Heading>
              <Text>Choose which projects each team can open.</Text>
            </Stack>
          </Grid.Item>
        </Grid.Root>
      </Section.Content>
      <Section.Separator span={{base: 'full', small: 6}} />
    </Section.Root>
  );
}
```

## API

### `Section.Root`

Renders `<section>`. Accepts its HTML attributes and `ref`.

### `Section.Content`

Renders `<div>`. Accepts its HTML attributes and `ref`.

### `Section.Separator`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `span` | `1 \| … \| 12 \| 'full' \| Partial<Record<GridBreakpoint, GridSpan>>` | `'full'` | Grid tracks the line spans, out of 12. Accepts container breakpoint keys, like `Grid.Item`. |
| `orientation` | `'horizontal'` | - | Only horizontal is supported. |

Renders `<div>`. Also accepts its HTML attributes, `ref`, and `render`.