Back to site

Spacer

Adds adjustable spacing between content sections.

There is a spacer below this text.

There is a spacer above this text.

---
import Spacer from "@core-elements/spacer/Spacer.astro";
import Text from "@core-elements/text/Text.astro";
---

<Text>
  <p>There is a <strong>spacer</strong> below this text.</p>
</Text>

<Spacer size="2xl" />

<Text>
  <p>There is a <strong>spacer</strong> above this text.</p>
</Text>
---
blocks:
  - _component: building-blocks/core-elements/text
    text: There is a **spacer** below this text.
  - _component: building-blocks/core-elements/spacer
    size: 2xl
  - _component: building-blocks/core-elements/text
    text: There is a **spacer** above this text.
---

Overview

A layout utility for adding adjustable vertical spacing between content. Supports predefined sizes for consistent spacing across layouts.

Properties

size enum | default: md

The amount of space to add.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

Examples

Size

There is an xs spacer below.

There is a sm spacer below.

There is a md spacer below.

There is a lg spacer below.

There is an xl spacer below.

There is a 2xl spacer below.

There is a 3xl spacer below.

End of spacer size examples.

---
import Spacer from "@core-elements/spacer/Spacer.astro";
import Text from "@core-elements/text/Text.astro";
---

<Text>
  <p>There is an xs spacer below.</p>
</Text>

<Spacer size="xs" />

<Text>
  <p>There is a sm spacer below.</p>
</Text>

<Spacer size="sm" />

<Text>
  <p>There is a md spacer below.</p>
</Text>

<Spacer size="md" />

<Text>
  <p>There is a lg spacer below.</p>
</Text>

<Spacer size="lg" />

<Text>
  <p>There is an xl spacer below.</p>
</Text>

<Spacer size="xl" />

<Text>
  <p>There is a 2xl spacer below.</p>
</Text>

<Spacer size="2xl" />

<Text>
  <p>There is a 3xl spacer below.</p>
</Text>

<Spacer size="3xl" />

<Text>
  <p>End of spacer size examples.</p>
</Text>
---
blocks:
  - _component: building-blocks/core-elements/text
    text: There is an xs spacer below.
  - _component: building-blocks/core-elements/spacer
    size: xs
  - _component: building-blocks/core-elements/text
    text: There is a sm spacer below.
  - _component: building-blocks/core-elements/spacer
    size: sm
  - _component: building-blocks/core-elements/text
    text: There is a md spacer below.
  - _component: building-blocks/core-elements/spacer
    size: md
  - _component: building-blocks/core-elements/text
    text: There is a lg spacer below.
  - _component: building-blocks/core-elements/spacer
    size: lg
  - _component: building-blocks/core-elements/text
    text: There is an xl spacer below.
  - _component: building-blocks/core-elements/spacer
    size: xl
  - _component: building-blocks/core-elements/text
    text: There is a 2xl spacer below.
  - _component: building-blocks/core-elements/spacer
    size: 2xl
  - _component: building-blocks/core-elements/text
    text: There is a 3xl spacer below.
  - _component: building-blocks/core-elements/spacer
    size: 3xl
  - _component: building-blocks/core-elements/text
    text: End of spacer size examples.
---