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) }}
Accusantium consequuntur itaque non voluptas modi. Ea unde commodi qui et.
Magnam optio minima quo dignissimos quis hic. Eum est iste voluptas repellat.

# 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 reprehenderit nobis asperiores est enim aliquid. Itaque sint nesciunt et et earum.
Divider
Ea adipisci rerum atque et quis omnis. Quia neque soluta reprehenderit.

The centered parameter allows you to center the text

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" :centered="true" />
{{ fake()->text(100) }}
Voluptas laborum et eaque. Itaque sed et sit porro. Incidunt natus quo natus dolorem voluptas.
Divider
Ut soluta ut sunt sed inventore deleniti est. Numquam porro magni sint repellendus.