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

Cupiditate nihil aut totam dolor tenetur. Libero fugit maxime minus sed velit.

Eum eveniet aspernatur laborum odio. Perspiciatis rerum assumenda et vel minima dolor optio nulla.

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

Perspiciatis nam officia saepe molestias sequi quo qui. Et eos magnam et sequi deleniti.

Divider

Ducimus ex id sed qui deserunt. Voluptas fugit quia veritatis magnam. Et et ab eaque impedit.

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

Laudantium quia repudiandae mollitia esse molestias. Non dignissimos recusandae quasi sed nam est.

Divider

Eum omnis voluptatum aut molestiae. Quo iusto deserunt minus dicta et id.