# Spacer Medium
A medium-height vertical spacer component that adds white space between content sections without any visible content.

## Screenshots

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

## What it looks like
A transparent section that takes up vertical space on the page. It renders no visible content, only providing spacing between other components. The spacer uses CSS Grid to create controlled vertical spacing that adapts between mobile and desktop breakpoints.

## Typography
This component renders no text content, so no typography classes apply.

## Colours
Authors cannot set section background or text colours on this component type. The spacer is transparent and palette names do not apply to it.

## Used fields
| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Sets the component identifier for tracking | No identifier assigned |
| index | Number | Determines component position in the layout sequence | Component appears at default position |
| componentType | Symbol | Must be set to "Spacer Medium" for proper rendering | Component will not render correctly |
| cmsLabel | Symbol | Provides editorial label for content management | No editorial reference available |

## Behaviour
The spacer applies responsive vertical spacing using the `container-row-1-4 laptop:container-row-1-8 container-row-6-4 laptop:container-row-6-8` CSS Grid classes. On mobile, it creates medium vertical gaps (4 rows), while on laptop and larger screens it provides more generous spacing (8 rows). The component renders as a section element with `role="separator"`, `aria-orientation="horizontal"`, and `aria-hidden="true"` attributes. It does not support any interactive functionality or content display.

## Impact of content changes
- **Remove component**: Eliminates the vertical spacing, causing adjacent components to appear closer together
- **Change componentType**: Switching to other spacer variants (Small, Large, or Line variants) will change the amount of vertical space created
- **Modify index**: Changes the position of the spacing within the page layout