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

Nostrum quia iste quo non cumque. Cum et et libero ut aut rem.

Tempore totam sint libero magnam. Architecto doloremque voluptatum rerum quae.

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

Dolorem et velit quisquam ut sit sint nisi. Dicta repellat odit mollitia sunt.

Divider

Unde quasi ipsam incidunt voluptas. Inventore quam sit asperiores. Quis commodi accusamus est.

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

Quis consequatur aliquid et nobis omnis labore. Dolorem nobis beatae eum.

Divider

Dolores animi consectetur nesciunt. Eum nulla et dolores. Omnis ratione nemo quasi voluptatem eos.