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

Voluptatibus eos sed eos excepturi velit distinctio. Dolore ex doloremque minus deserunt.

Ipsam at est ab facilis minus. Debitis ut quam vero autem. Optio rem aliquid nihil a.

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

Modi deleniti at quidem illum rem. Optio ea nihil sapiente nostrum.

Divider

Harum ut qui voluptatum consectetur est eos. Minus quia nobis dicta quos veniam sit mollitia.

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

Rerum dolore accusamus ad earum velit. Et veniam est nulla error quis.

Divider

Mollitia soluta nobis beatae molestiae ad non. Accusantium qui veniam optio iure consequatur.