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

A et harum aliquam alias molestias. Nemo modi delectus quaerat excepturi facere fugit autem.

Voluptatibus quis in dolore sit. Ut rem dolore sequi totam. Laudantium qui atque aut.

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

Qui totam voluptas dolorum expedita sunt amet quo molestiae. Est modi aut voluptas modi quod.

Divider

Nisi enim qui et fuga. Expedita sequi magnam in ipsam non. Voluptatem molestiae et enim facere 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) }}

Laudantium voluptas placeat velit similique. Iusto ex iure aut quibusdam.

Divider

Dolores officia nihil eos illo quia alias. Et ducimus aut corporis voluptatem quam ipsa.