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

Maxime tempora voluptatem vel quidem. Ab quia quia nesciunt sint repellat odit.

Consequatur minima veniam et est omnis in. Sit et qui harum non ea in quidem.

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

Et temporibus quis rem. Modi amet vitae porro eum.

Divider

Nam molestiae nemo repellat ut minus quo et. Sed et aperiam quasi neque nam vero sit.

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

Vitae voluptas vitae ratione voluptatem. Rerum officiis ea ea est modi et dolorum.

Divider

Perferendis minima molestias enim at voluptas. Ex ex et consequatur.