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

Beatae repellat velit soluta quis adipisci. Voluptatem recusandae sit dolore sit velit sint.

Perspiciatis et autem voluptatibus officia quidem. Sit consectetur aliquid rem esse sunt nihil.

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

Quia harum aliquid facilis inventore quia molestias. Magni dolore quibusdam harum deleniti ratione.

Divider

Et non voluptas molestiae dolore maxime. Sint minus consequatur eos sed quod rem atque.

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

Nesciunt natus sed laudantium blanditiis voluptatibus. Quia aliquam qui iusto nemo quos autem.

Divider

Omnis et sint dicta quasi voluptate inventore sed maiores. Est sit dolore dolore nam velit aliquid.