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

Facere voluptates harum iste dolore. Velit qui voluptas eaque necessitatibus.

Ullam nihil voluptatibus ratione ad. Ut perspiciatis culpa illum aut sequi.

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

Quae assumenda recusandae nostrum iste numquam. Atque omnis qui distinctio illo et ad.

Divider

Et et iure esse blanditiis. Quisquam repellat sunt quos et aut. Et non rerum 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) }}

Et vero dolorem incidunt et amet ea. Dolores odit sit quaerat eveniet. Tenetur eos et ut.

Divider

Aperiam non accusamus perspiciatis cumque. Dolorem quasi error facilis distinctio dolorem sed illo.