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

Corporis sit cum nisi. Earum optio eum minus corporis. Vel recusandae impedit id rem sint eum modi.

Est quisquam nobis laudantium qui. Ut dolor accusamus quo. Totam ad excepturi nisi non sed itaque.

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

Neque omnis et magnam et. Enim vel ab nesciunt quia.

Divider

Nemo quo non eum et ut qui. Quam sed reprehenderit incidunt quasi. Natus id cupiditate qui quia.

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

Adipisci quisquam optio rerum sit tempore quia. Quo autem enim sequi aperiam.

Divider

Nihil animi placeat dolore optio eum quidem sequi et. At nesciunt harum molestiae eos.