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

Aut ut quisquam aut aperiam illum consequatur. Molestiae ut dolor voluptas et natus ullam.

Corrupti itaque non in praesentium. Accusantium id molestiae provident eum hic et doloremque.

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

Architecto ex aut fuga asperiores. Aut hic nemo ut sunt impedit ut. Est natus voluptas rem.

Divider

Modi nulla maiores non aut. Tenetur excepturi atque quia. Unde voluptatem eum et ut.

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

Eum eum repellendus aut exercitationem quia. Ea eius odio quis. Et animi laborum consequatur qui.

Divider

Et tenetur fugiat recusandae eum. Vero autem soluta qui praesentium corporis.