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

Quis et magnam enim commodi. Sed quia omnis esse ratione quasi qui velit.

Suscipit et illo sint blanditiis repellendus aut. Eos labore nulla cum eum dolor rerum enim.

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

Sit ea mollitia est expedita. Temporibus eum incidunt voluptas modi rerum.

Divider

Magnam porro praesentium impedit molestiae. Est blanditiis autem tenetur molestiae.

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

Minima eos placeat consectetur vel quos optio. Qui animi et est. Magnam eos repellat atque optio.

Divider

Sunt sunt sunt excepturi asperiores officiis et delectus. Et doloremque ipsa eveniet qui quam.