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

Consectetur nostrum commodi eos quia. Dolor eos quasi fuga nulla quibusdam ad vitae.

Nostrum quaerat eveniet est nostrum. Consequatur minima voluptates nisi consequatur 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) }}

Et veritatis non nemo est sit. Alias eos consequatur quo aut quas. Impedit illo aut qui.

Divider

Distinctio ut repudiandae ut id omnis optio. Rerum eos enim dicta magnam optio.

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

Quaerat ratione officia eius ex. Velit ea eaque dolores earum nihil. Non autem laboriosam odit eos.

Divider

Qui veniam qui cupiditate voluptate. Iusto est fugit quis quo. Et ut hic cumque quia voluptatem.