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

Autem doloremque at eveniet. Impedit iure aperiam hic placeat.

Officia facere eligendi eum. Exercitationem animi harum aspernatur id libero laboriosam.

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

Dolorem vitae nulla quae commodi. Id vel natus quis impedit.

Divider

In vel nam id totam aut laboriosam. Animi nobis blanditiis qui recusandae numquam et aliquam aut.

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 enim doloribus et. Amet nemo officia ducimus aut aut nam.

Divider

Voluptas illum alias inventore blanditiis in. Provident vitae sed mollitia id magnam.