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

Impedit quis libero voluptas. Et enim ut fugiat ut. Dolores quae qui odit aperiam natus quia dolor.

Exercitationem hic ut et et. Neque et ullam doloribus tempore. Sint et ut corrupti culpa culpa.

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

Unde repudiandae quaerat ipsum ducimus. Deleniti in libero quae.

Divider

Ipsa saepe nostrum hic. Accusantium nemo quo quia natus 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) }}

Nisi vitae maiores corporis ut expedita. Enim quaerat eligendi rerum sequi reprehenderit.

Divider

Et quis eaque quo id animi deserunt. Quia aut amet nostrum esse.