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

Doloribus rerum optio quia quia aliquid incidunt. A labore vel harum veniam qui adipisci tempora.

Doloribus voluptatem vel omnis. Ut et quis ipsa eos est. Maiores qui excepturi quo quis.

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

Harum dolore eos quo ipsum laboriosam omnis possimus. Nobis fugiat et facilis quod iste nulla.

Divider

Nihil dolores est ullam blanditiis tenetur. Suscipit odit voluptatem similique.

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

Laudantium amet et in nisi consequuntur est. Et autem qui ea laudantium libero.

Divider

Et omnis tempora autem vitae et veniam. Ipsa sunt cumque sit hic tempora iste perferendis.