# Spacer Medium Line
A visual separator component that creates medium-sized vertical spacing between content sections with a horizontal line across the full width.

## Screenshots

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

## What it looks like
This component renders as a full-width horizontal black line with medium vertical spacing above and below. The spacing uses a CSS grid system with 4 rows on mobile (spanning rows 1-4) and 8 rows on desktop/laptop (spanning rows 1-8). The line spans the complete width of the container and serves as a visual separator between content sections.

## Typography
This component contains no text content and does not use any typography classes.

## Colours
Authors cannot set background/text colours on this component type. The horizontal line uses a fixed black border and palette names do not apply to it.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| componentType | Symbol | Must be "Spacer Medium Line" to render the line variant | Component will not render correctly |
| id | Symbol | Sets unique identifier for the component | No specific identifier applied |
| index | Number | Determines component position in content flow | Default positioning used |
| cmsLabel | Symbol | Provides editorial label for content management | No visible effect on frontend |

## Behaviour
The component automatically renders a horizontal line when the componentType includes "Line" in the name. It uses semantic HTML with `role="separator"`, `aria-orientation="horizontal"`, and `aria-hidden="true"` for accessibility. The spacing is responsive, using smaller vertical spacing on mobile devices and larger spacing on laptop/desktop breakpoints.

## Impact
- **Remove component**: The visual separator and vertical spacing disappears entirely
- **Change componentType**: If changed to a non-line spacer variant (e.g., "Spacer Medium"), the horizontal line disappears but spacing remains
- **Modify cmsLabel**: No visible frontend changes, only affects content management interface