# Section change
A visual separator component that creates spacing between content sections, identical to spacer components but semantically indicates a transition between different content areas.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Fsection-change-default.png) |

## What it looks like
Renders as an invisible horizontal separator with vertical spacing above and below. Takes full width of the container and provides structural separation between content sections. No visible content is displayed - purely for spacing and semantic markup.

## Typography
No text content is rendered, so no typography classes apply to this component.

## Colours
Authors cannot set background or text colours on this component type. The component renders as an invisible separator without visual styling.

## Used fields
| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Sets unique identifier for the separator element | No identifier applied |
| index | Number | Determines position in content sequence | Uses default positioning |
| componentType | Symbol | Must be "Section change" for proper rendering | Component will not render correctly |
| cmsLabel | Symbol | Used for content management identification | No effect on visual output |

## Behaviour
Functions as a semantic separator with `role="separator"`, `aria-orientation="horizontal"`, and `aria-hidden="true"` attributes. The component uses the same spacing system as other spacer components but is specifically intended to mark transitions between different content sections. Renders as a section element with grid-based vertical spacing.

## Impact
- **Add/remove component**: Creates or removes vertical spacing and semantic separation between content sections
- **Change index**: Affects positioning within the content sequence but does not change visual appearance
- **Modify cmsLabel**: No visible changes, only affects content management interface