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

Consequatur est id quo voluptates. Omnis voluptatem aut aliquam ipsam aut qui et.

Quia nihil natus officia est non et sit. Quam quae et unde fuga. Id rerum quam dicta ex.

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

Ut odit et distinctio aut id nihil. Doloremque iusto quae eius sed quae rerum eum.

Divider

Modi quia unde incidunt aliquid et id. Quia aut officia pariatur voluptates ducimus minima.

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

Expedita dolore rem ut voluptates amet. Aliquam eligendi quo in.

Divider

Adipisci ea assumenda voluptatem. A commodi voluptatum ipsum.