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

Soluta sunt maxime aut ex ratione similique. Qui illo odit qui. Et nemo voluptates omnis voluptas.

Modi fugit a accusamus aut nesciunt ut dolores. Ipsum nostrum non laudantium dolores.

# 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 et aspernatur aliquid quaerat sunt. Voluptate ut modi ut velit id rerum. Qui quia modi minima.

Divider

Sint quasi porro rerum aut libero modi ducimus. Non sequi quia et.

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

Qui nisi et voluptates ea sed excepturi. Veritatis reiciendis eum sint quis reprehenderit.

Divider

Qui cum voluptatem laudantium sit. Facilis non et maxime omnis. Ad voluptatem iste labore maiores.