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

Voluptas voluptatem quis voluptas. Nemo sit unde autem. Consequuntur cum quidem odio est.

Enim doloribus eos qui. Sed voluptatum vero id dolore voluptate.

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

Corporis amet deleniti porro quod et impedit earum. Laborum non sed error rem.

Divider

Sunt in ea velit quia. Dolorem enim alias et. Qui placeat quos repellat.

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

Commodi ut ut non et. Ex et suscipit sed. Eius neque enim fugiat corporis.

Divider

Laborum eveniet sit voluptatem repellat. Sed consectetur exercitationem autem architecto.