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

Iusto dolore sed eos unde. Dolorem error ipsum possimus eveniet amet aperiam.

In qui nulla placeat odio. Modi nam et corrupti et laboriosam quia dolore facere.

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

Fugit minima non minus. In illo aliquam recusandae sit aut minima. Dolore qui sint commodi saepe.

Divider

Ipsum fuga at ad magni atque enim. Qui assumenda eius ullam quod.

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

Ducimus iusto laboriosam animi culpa explicabo. Aperiam eius cum quas cum occaecati.

Divider

Odit temporibus nam aspernatur perferendis dolores. Corporis veniam beatae culpa eligendi.