Divider

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

# Basics

The moonshine::divider component allows you to create a stylized content divider

{{ fake()->text(100) }}
<x-moonshine::divider />
{{ fake()->text(100) }}
Quis doloribus nemo voluptatem incidunt. Omnis placeat qui voluptas aut. Quia neque et ut magnam.
Rem libero ipsa quam. Cum unde qui quia neque alias.

# Text divider

You can use text as a separator, for this you need to specify the text in the label parameter

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" />
{{ fake()->text(100) }}
Saepe qui aut omnis sapiente ipsum sunt amet. Suscipit minima quis itaque.
Divider
Molestiae quos et sed et. Excepturi libero autem ratione eaque.

The centered parameter allows you to center the text

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" :centered="true" />
{{ fake()->text(100) }}
Id culpa incidunt mollitia non. Vero et ab sint perspiciatis blanditiis non ut.
Divider
Ut totam hic dolor ratione. Sint omnis aspernatur odit. Amet ea quas quia.