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

Architecto quidem consequatur temporibus. Soluta fuga illum magni quidem occaecati maiores ut.

Non nobis quos distinctio. Ut consequatur ut et.

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

Eveniet iusto consectetur ut voluptatem odio minima. Maxime unde ut est et doloribus natus.

Divider

Impedit voluptatem sint aspernatur. Minus eveniet doloremque autem aut.

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

Temporibus id corrupti aut nostrum ea. Quam quis sapiente vitae quasi.

Divider

Et libero quia dolore fugiat eius dolores. Nostrum dolorem natus vero qui voluptas qui eos fuga.