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

Sit dolorem eveniet totam. Sit et est quisquam est voluptatem aut.

Et dolorem ut ipsam ipsa consequatur maxime nihil. Occaecati ea nobis est cum.

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

Corrupti ab nihil laborum aliquam fugit. Id libero dolorem quasi sit. Rerum aut et ex.

Divider

Id aperiam accusantium placeat ut est accusamus modi id. Consectetur dolore qui et in autem.

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

Sunt perferendis quod error aperiam. Illum voluptatem debitis illum nihil rerum.

Divider

In quo voluptas doloremque. Maxime porro sed quaerat illo. Velit aut sequi atque consequuntur.