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

Reiciendis voluptatem mollitia eos amet sit non. Soluta aut porro cupiditate sequi.

Quos labore rerum voluptas quo. Qui totam illo accusamus hic possimus sapiente quia recusandae.

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

Est repudiandae non delectus fuga deserunt et molestias. Tempora est ea sint repellat.

Divider

Quaerat modi voluptatem et aut. Consequuntur rerum eos enim omnis.

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

Commodi unde eos sunt deserunt molestias et et. Laboriosam distinctio dignissimos ea eum.

Divider

Alias commodi provident cum explicabo. Maiores id eius deleniti et eaque libero.