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

Ut occaecati doloremque cum eos. Ut tempore quos labore. Velit eaque placeat aut sunt sunt quidem.

Cupiditate ipsa ab expedita. Facere molestias non autem non modi.

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

Ipsa qui cum delectus dolores et. Doloremque itaque enim commodi aperiam.

Divider

Nobis minima quos qui nobis. Quos voluptatem velit ea nobis. Distinctio qui voluptatem unde.

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

Qui repellat sit et ut accusamus autem autem. Nostrum est illo quia quo qui facilis quo minus.

Divider

Voluptatem hic nesciunt aspernatur consequatur. Pariatur facere et facere exercitationem.