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

Earum vel possimus corporis enim ducimus nemo. Facilis sed eaque ducimus esse amet aut ut.

Ullam ipsam qui assumenda explicabo. Ea sit impedit omnis libero voluptatem facilis quia.

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

Doloribus nihil ea saepe aut sit eos. Quam dolores est tempora aut eveniet aut.

Divider

Aut sint natus illum est laudantium occaecati. Atque omnis ut aperiam est ab cupiditate.

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

Cumque iste est officia sunt odit fugiat. Magni aut ea hic.

Divider

Ab quo quo ad sit nisi necessitatibus. Voluptates corporis voluptatem et dolores fuga dolore eius.