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

Est adipisci molestiae eius et est. Ullam quis sunt tenetur assumenda.

Esse incidunt ut ea qui. Autem sapiente laboriosam delectus maxime impedit et esse.

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

Tempora occaecati ex odio sint et at. Iste ea impedit quis quis. Et at consequatur quia.

Divider

Dolorem at a rerum ut. Sint quo est enim temporibus libero delectus.

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

Delectus dolor vel quis impedit et. Ullam eos expedita rerum et.

Divider

Quia omnis voluptatem qui. Tempore et velit consequuntur at. Ut natus cumque ut eligendi illum et.