Divider
Visual separator for dividing content sections.
There is a divider below this text.
There is a divider above this text.
---
import Divider from "@core-elements/divider/Divider.astro";
import Text from "@core-elements/text/Text.astro";
---
<Text>
<p>There is a <strong>divider</strong> below this text.</p>
</Text>
<Divider paddingVertical="md" />
<Text>
<p>There is a <strong>divider</strong> above this text.</p>
</Text>---
blocks:
- _component: building-blocks/core-elements/text
text: There is a **divider** below this text.
- _component: building-blocks/core-elements/divider
paddingVertical: md
- _component: building-blocks/core-elements/text
text: There is a **divider** above this text.
---Overview
A simple visual separator for dividing content sections. Renders a horizontal line with configurable spacing above and below to control layout flow.
Properties
paddingVertical enum | default: lg
The space on the top and bottom of the horizontal line.
Accepted values:
-
none -
xs -
sm -
md -
lg -
xl -
2xl -
3xl
Examples
Padding
Below is a divider with 'none' padding.
Below is a divider with 'xs' padding.
Below is a divider with 'sm' padding.
Below is a divider with 'md' padding.
Below is a divider with 'lg' padding.
Below is a divider with 'xl' padding.
Below is a divider with '2xl' padding.
Below is a divider with '3xl' padding.
---
import Divider from "@core-elements/divider/Divider.astro";
import Text from "@core-elements/text/Text.astro";
---
<Text>
<p>Below is a divider with 'none' padding.</p>
</Text>
<Divider paddingVertical="none" />
<Text>
<p>Below is a divider with 'xs' padding.</p>
</Text>
<Divider paddingVertical="xs" />
<Text>
<p>Below is a divider with 'sm' padding.</p>
</Text>
<Divider paddingVertical="sm" />
<Text>
<p>Below is a divider with 'md' padding.</p>
</Text>
<Divider paddingVertical="md" />
<Text>
<p>Below is a divider with 'lg' padding.</p>
</Text>
<Divider paddingVertical="lg" />
<Text>
<p>Below is a divider with 'xl' padding.</p>
</Text>
<Divider paddingVertical="xl" />
<Text>
<p>Below is a divider with '2xl' padding.</p>
</Text>
<Divider paddingVertical="2xl" />
<Text>
<p>Below is a divider with '3xl' padding.</p>
</Text>
<Divider paddingVertical="3xl" />---
blocks:
- _component: building-blocks/core-elements/text
text: Below is a divider with 'none' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: none
- _component: building-blocks/core-elements/text
text: Below is a divider with 'xs' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: xs
- _component: building-blocks/core-elements/text
text: Below is a divider with 'sm' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: sm
- _component: building-blocks/core-elements/text
text: Below is a divider with 'md' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: md
- _component: building-blocks/core-elements/text
text: Below is a divider with 'lg' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: lg
- _component: building-blocks/core-elements/text
text: Below is a divider with 'xl' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: xl
- _component: building-blocks/core-elements/text
text: Below is a divider with '2xl' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: 2xl
- _component: building-blocks/core-elements/text
text: Below is a divider with '3xl' padding.
- _component: building-blocks/core-elements/divider
paddingVertical: 3xl
---