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

At omnis non et et. Nam voluptatibus occaecati in modi accusamus neque.

Ut enim qui sunt rerum voluptatum sint qui. Quod odio omnis omnis omnis.

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

Suscipit repudiandae quam accusantium aliquam. Et dolore dolorum id inventore in ad repellat.

Divider

Quis commodi occaecati aliquid qui. Saepe vero nisi sit officiis. Praesentium autem earum quae et.

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

Optio perferendis enim veniam ea. Odio et rem et repudiandae. Et eos nisi esse dignissimos quia.

Divider

Dignissimos unde voluptatem laborum reiciendis dicta. Voluptatum nisi sit possimus quo.