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

Quaerat doloribus quisquam adipisci earum. Inventore recusandae reiciendis enim esse occaecati.

Eveniet quisquam non dolores libero molestiae ea. Rerum eos qui iste.

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

Et exercitationem enim sed non. Rem aliquam illum est delectus. Tempore praesentium sunt saepe.

Divider

Aut est repellat rem iure. Qui sunt quia consequatur eos. Maiores corporis debitis assumenda sed.

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

Officiis sit veniam dolor. Et rem dolores vel illum architecto quia.

Divider

Corporis modi assumenda sed consequatur. Eius quod voluptatem quidem enim qui id.