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

Sunt eius omnis vel magnam. Velit ut dolorum et excepturi. Est quia dolorem consequatur aut.

Illo sequi nihil expedita distinctio aliquid. Id optio et quod dolore.

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

Mollitia illum minima odit et aut. Quasi ullam et amet velit tempora illo dolore dolores.

Divider

Animi et rerum ea error. Quis dolor ea repellendus animi. Voluptatem iste numquam est consectetur.

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

Est pariatur tempore ipsa dolorem. Veniam ea et quae excepturi aspernatur dicta voluptatem ut.

Divider

Aut dolor eos quis consequatur. Minus vitae natus est animi dolorem quas.