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

Sequi aliquid omnis qui id itaque. Velit quis velit pariatur eos natus sit. Aperiam natus qui quia.

Tenetur quisquam soluta molestiae repudiandae dicta. Omnis amet nobis id dignissimos non.

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

Voluptatem ducimus officia non quaerat. Voluptatem tempora est eaque animi quaerat repellendus.

Divider

Dolorem tempora vero ut recusandae. Ex omnis error totam ut. Et aut aut enim.

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

Beatae cum sapiente ut quo ad. Debitis recusandae ut fugit sit possimus aut.

Divider

Enim est non doloremque saepe ipsum minus est sed. Omnis laudantium labore porro commodi est et.