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

Magni velit quia aut saepe error. Hic sit hic qui rem. Laborum dolorem iusto voluptatibus.

Et numquam error expedita eos reprehenderit in. Quis est dolorem dolorem eveniet.

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

Doloremque asperiores et beatae assumenda in. Aliquam eligendi dolores quo optio aliquam.

Divider

Magni nostrum inventore occaecati vel. Quaerat expedita architecto quae quisquam.

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 dolorem aut nam quia dicta iure. Quis esse voluptate distinctio eius quia.

Divider

Quod quo maxime fugiat. Placeat et quia atque. Iusto qui consectetur quaerat ea reiciendis et.