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

Ducimus eveniet rerum cumque dicta. Dolor eos adipisci error. Aliquid molestiae nobis quia modi ea.

Qui et tenetur inventore. Tenetur illum ipsa est molestiae dolor eius. Sapiente omnis dolor fugit.

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

Incidunt vel ipsam tenetur quia adipisci sed. Quasi qui harum et eos.

Divider

Quia accusantium ex aut ut qui. Atque fuga ipsam a et iusto culpa. Aperiam eum sit iste sunt.

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

Quam ipsum expedita sit nobis facere aliquid. Perferendis nesciunt et quidem nisi.

Divider

Vel explicabo maxime consequatur ex unde ex. Qui consequuntur id corporis.