Divider

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

Sections
- Basics
- Text 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) }}

Placeat provident dolorem sed facilis. Placeat libero veritatis dicta sint.

Sint eaque dolores unde voluptas inventore. Et quas consequatur laudantium et.

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

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

Molestias rerum voluptas et odit. Dolor sed iste qui.

Divider

Voluptatem id necessitatibus est eos perspiciatis rem. Sit veniam ex atque ut perspiciatis aut.

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

Voluptatem quaerat cum dolorem vitae omnis. Similique facilis quidem unde et.

Divider

Voluptas aut laborum voluptate velit. Sunt aut optio exercitationem et at.