# Spacer Small
Creates a small vertical spacing between page sections, providing visual separation with minimal height.

## Screenshots

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

## What it looks like
A minimal vertical separator that takes up a small amount of vertical space on the page. The component renders as a full-width section with defined grid spacing but no visible content. On mobile devices, it creates half a row of spacing (`container-row-1-2` and `container-row-6-2`), while on laptop and larger screens it creates quarter-row spacing (`container-row-1-4` and `container-row-6-4`).

## Typography
This component contains no text content, so no typography classes are applied.

## Colours
Authors cannot set background or text colours for this component - it renders as a transparent spacer with no colour properties.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Sets HTML anchor ID for the spacer section | No anchor ID applied |
| index | Number | Determines position in content sequence | Component positioned at default index |
| componentType | Symbol | Must be "Spacer Small" for this registration | Component will not render correctly |
| cmsLabel | Symbol | Internal label for CMS organization | No effect on frontend rendering |

## Behaviour
The component renders as a semantic separator with `role="separator"`, `aria-orientation="horizontal"`, and `aria-hidden="true"` for accessibility. It uses responsive grid classes that provide smaller spacing on mobile and slightly larger spacing on desktop viewports. The spacer maintains full width across all screen sizes and integrates with the site's grid system.

## Impact
- **Modify cmsLabel**: No visible change to frontend, only affects CMS organization
- **Change index**: Repositions the spacer within the page content flow