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

Neque nihil sunt quae. Ut quia aliquid veritatis tempora autem beatae est mollitia.

Eum omnis aut molestias ad quidem. Fugiat expedita harum magnam nisi ut. Tenetur sit veniam et aut.

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

Veniam occaecati aut esse. Dicta consequatur consequatur tenetur sunt eum ut dolores.

Divider

Sed eligendi rem molestiae non sit maiores. Dolores consequuntur non saepe sequi.

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

Voluptatem ipsam officia eum nesciunt. Praesentium impedit aut sit maxime consequatur ipsam.

Divider

Dolorum magni repellendus dolorem optio molestiae. Nemo quidem laudantium consequatur aut.