---
title: "Spacer"
description: "The Spacer Component is used to create Space between Components for Structuring a Page."
path: https://www.eonshowroom.eon.com/en/page-elements/spacer.html
lastModified: 2025-01-22T14:43:30.868Z
---

# Spacer

# Spacer

##### Between these Lines ...

##### ... there is Space on all Viewports

[How to Configure](#how-to)

### Description

The Spacer Component can be used to create Space between Components for Structuring a Page.

- Creates Space between Components
- Can be (de-)activated per Breakpoint of the Viewport
- Helps to structure a Page

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-spacer--interactive)

### Inspirations

##### Between these Lines ...

##### ... there is only Space on Large Desktop

##### Between these Lines ...

##### ... there is only Space on Desktop

##### Between these Lines ...

##### ... there is only Space on Tablet

##### Between these Lines ...

##### ... there is only Space on Phone

### Usage Rules & Features

##### Features

- Creates Space between Components

##### Properties

- Can be (de-)activated per Breakpoint of the Viewport

##### Design

- Used to structure a Page

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | yes |
| 3 | yes |
| 4 | yes |
| 5 | yes |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | yes |

##### DO's

- Use it only if additional Space is really needed

##### DONT's

- Don't use it without checking it on different Viewports as Components itself also have already Spacings

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/spacer%3A4-3?fmt=webp)

### Hide Spacer per Breakpoint

In Editor Dialog the only Options are to hide the Spacer on different Breakpoints via using corresponding Checkboxes:

| Breakpoint Name | min-width | max-width |
| --- | --- | --- |
| ****Phone |  | 767 px |
| Tablet | 768 px | 1023 px |
| Desktop | 1024 px | 1439 px |
| Desktop Large | 1440 px |  |