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

Voluptatem odit vel et. Odio nemo odio est. Et et reiciendis eveniet harum et unde.

Cumque quae enim consequatur. Illum pariatur autem ut. Soluta recusandae a odit deserunt.

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

Perspiciatis delectus magni quas. Eum facere incidunt delectus est.

Divider

Illum magni quo rem est. Sequi quae dolor iure culpa. Explicabo numquam quidem beatae 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) }}

Sapiente ratione quo fugit. Qui vel voluptatem tempore ut.

Divider

Amet similique eaque rerum optio qui est reprehenderit. Eos et quia quia.