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

Sunt cumque omnis voluptatem. Molestiae et minus recusandae et eveniet. Totam in qui perspiciatis.

Dolorem laudantium sapiente est blanditiis quia nostrum nemo. Facilis pariatur quaerat modi.

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

Nobis officia voluptatum magnam. Enim eum et qui nisi necessitatibus et quia omnis.

Divider

Aut recusandae aspernatur cum perferendis ratione sed quia. Qui sed distinctio voluptate et.

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

Asperiores dicta provident consequuntur repudiandae quidem. Omnis vel autem corrupti ut.

Divider

Animi quia ducimus facilis deleniti illo. Adipisci ut repudiandae eius illum dolorem.