Divider

# Basics

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

{{ fake()->text(100) }}
<x-moonshine::divider /> 
{{ fake()->text(100) }}

{{ fake()->text(100) }}
<x-moonshine::divider />
{{ fake()->text(100) }}

Officia aut optio enim culpa aut. Id quia vel hic rerum et omnis.

Eaque laudantium aut veniam fugiat unde dolorem. Libero atque corporis labore consequatur.

# Text separator

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

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" /> 
{{ fake()->text(100) }}

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" />
{{ fake()->text(100) }}

Et omnis cupiditate quam. Est labore ut magni. Quis id cupiditate rem vero.

Divider

Nemo minus quae totam eum libero ipsam. Quasi vero earum aut est laudantium tempora.

The centered parameter allows you to center the text.

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" :centered="true" /> 
{{ fake()->text(100) }}

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" :centered="true" />
{{ fake()->text(100) }}

Repellat enim et optio officia. Iste asperiores praesentium repellendus.

Divider

Aut iste quo asperiores. Quia perspiciatis nisi labore ab. Sed ipsum iure rerum porro.