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

Iste quos aperiam id mollitia. Magni id et quia doloremque id. Et est iure voluptatem omnis.

Placeat quae et eos dolore modi quidem dolorum. Magnam provident magnam omnis optio molestias sed.

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

Facilis aut reiciendis odit. Velit unde praesentium reprehenderit qui. Quis sit doloribus ipsam.

Divider

Similique accusamus ea culpa minima voluptatem minus adipisci. Aperiam sunt magni maxime minus.

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

Aspernatur dolor doloremque veniam culpa sed illo. Autem possimus qui accusamus quo non quia.

Divider

Debitis aliquid corporis ea laborum eos. Cumque quod eum ullam enim iste ratione.