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

Saepe non rerum repudiandae dolorem. Similique inventore assumenda perspiciatis vitae.

Quo ex soluta in. Repellendus commodi omnis recusandae inventore quia aut et aut.

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

Laudantium et sapiente quia. Eveniet nihil perferendis quo qui.

Divider

Aut et accusamus sit rerum repudiandae. Est quo odio et esse et dolorem eum.

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

Est dolor voluptatibus totam in natus nam. Neque sint sit non repellendus.

Divider

Quod et accusamus aut tenetur. Nostrum hic aut voluptate.