# Spacer Large Line
Creates a large vertical spacing area with a horizontal line separator, ideal for creating distinct visual breaks between major sections of content.

## Screenshots

| Variant | Preview |
|---------|---------|
| backdrop dark | ![backdrop dark](screenshot-spacer-large-line-backdrop-dark.png) |
| default | ![default](screenshot-spacer-large-line-default.png) |

## What it looks like
Renders as a full-width horizontal black line positioned within a large vertical spacing container. The spacing uses a 6-row grid system on mobile (`container-row-1-6` and `container-row-6-6`) and expands to 16 rows on laptop breakpoint (`container-row-1-16` and `container-row-6-16`). The line spans the full column width and appears as a 1px solid black border positioned at the top of the spacer area.

## Typography
No typography elements are used in this component. The spacer contains only a visual line separator with no text content.

## Colours
Authors cannot set section background or text colours on this component type. The component uses a fixed black colour for the horizontal line via `border-black` class. The Section wrapper may apply theme colours based on surrounding context, but this component itself has no colour configuration fields.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| componentType | Symbol | Must be "Spacer Large Line" for proper spacing and line rendering | Component will not render correctly |
| id | Symbol | Provides unique identifier for the component instance | No functional impact on display |
| index | Number | Determines position within page layout | Default positioning applies |
| cmsLabel | Symbol | Internal label for content management | No visual impact on frontend |

## Behaviour
The component renders with semantic `role="separator"` and `aria-orientation="horizontal"` attributes for accessibility. It's marked as `aria-hidden="true"` since it's purely decorative. The line appears conditionally only because the component type includes "Line" in the name. Spacing increases significantly on laptop breakpoint from 6-row to 16-row grid system.

## Impact
- **Remove component**: Eliminates the large vertical spacing and horizontal line separator
- **Change componentType**: Alters spacing size and may remove line if changed to non-Line variant
- **Modify cmsLabel/id**: No visible changes to the rendered output