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

Dolorum iure dolor ut tempore. Ab sunt dolorem facere velit. Qui voluptas aut architecto nostrum.

Doloremque aliquid aut reprehenderit possimus ut. Minima aspernatur nulla voluptatem.

# 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 quam aut aut voluptatum esse similique eligendi. Beatae aliquid asperiores quia.

Divider

Et sunt facilis eius qui. Illo accusamus repellendus 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) }}

Accusantium dolor est ut quis. Consectetur minima quis ut sit. Rerum est non repellat voluptas id.

Divider

Sed voluptatem est vitae sequi assumenda natus. Beatae nemo perspiciatis rerum excepturi.