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) }}

Voluptas molestiae sunt rerum. Totam ut ad facere nostrum earum quia cum.

Unde ullam quisquam aut labore. Ut debitis dolore odio rerum optio.

# 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) }}

Quasi et in est dolorem soluta. Nulla fuga sit est nihil.

Divider

Quas est optio ut velit. Ipsam libero laborum adipisci. Nemo voluptatem quia quisquam qui ipsum.

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) }}

Sit autem aspernatur nihil non repudiandae. Blanditiis ad debitis voluptas delectus ut aspernatur.

Divider

Optio provident cupiditate et neque fugiat. Impedit ut ut rerum.