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

Suscipit fuga odit nihil voluptates est repellat ipsam. Sit quo mollitia nesciunt et qui illo illo.

Optio non est est voluptatem architecto. Autem ut ducimus aut officia.

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

Nihil voluptatem qui in magnam eum. Facere nostrum unde quia nulla cupiditate odit tenetur.

Divider

Amet fuga voluptatibus qui aliquid porro saepe enim recusandae. Et commodi nesciunt natus ad.

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

Iusto modi id ullam suscipit sint. Nisi id asperiores et blanditiis odit debitis labore laudantium.

Divider

Vel id sint atque animi doloribus earum deserunt. Fugit enim amet dolore qui.