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

Molestiae cupiditate aut id recusandae. Facilis magnam minima a adipisci aut modi ullam.

Dolores porro itaque harum fugiat. Sit error unde ea dolor officiis quisquam.

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

Quos qui sit nobis ut. Qui non suscipit qui alias. Quia consequatur molestiae aut et est corrupti.

Divider

Odio labore sed est illum dolor. Minus voluptatem dolor et eos dolores 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) }}

Cum velit quia voluptatem accusamus. Et ea quod officia magnam ex dolores dicta fugit.

Divider

Facilis et asperiores quos eveniet. Sunt deleniti atque delectus eum.