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 a 'xs' spacer below.
There is a 'sm' spacer below.
There is a 'md' spacer below.
There is a 'lg' spacer below.
There is a 'xl' spacer below.
There is a '2xl' spacer below.
There is a '3xl' spacer below.
---
import Spacer from "@core-elements/spacer/Spacer.astro";
import Text from "@core-elements/text/Text.astro";
---
<Text>
<p>There is a '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 a '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" />---
blocks:
- _component: building-blocks/core-elements/text
text: There is a '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 a '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
---