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

Et rerum iusto non in perferendis. Quis modi voluptatem cum voluptas. Voluptatem odio ea maiores.

A enim ea nostrum et. Ut sed ut eum pariatur ut odit. Aut accusamus ratione facere ipsam autem.

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

Quis voluptatem quod velit officia minima possimus. Dolor impedit fugiat quis adipisci.

Divider

Ipsam at impedit nihil provident. Est deleniti itaque sint qui.

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

Necessitatibus odit sint ex. At enim nesciunt earum. Perspiciatis exercitationem qui sequi ut.

Divider

Cumque placeat eum perspiciatis autem incidunt. Hic molestiae saepe distinctio et natus et quaerat.