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

Cumque ipsa voluptatem tenetur mollitia. Aut ut possimus numquam quia culpa voluptatem non.

Error laboriosam delectus animi. Autem incidunt magni est.

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

Ratione eaque exercitationem qui quis illo sit voluptatem. Quisquam aut fuga atque aut.

Divider

Et mollitia ipsa optio et et ipsam sunt. Possimus sequi ipsam enim enim et laborum sunt.

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

Aut non illo porro animi. Adipisci eaque tenetur aut suscipit. Culpa ut quae quo in accusantium.

Divider

Et earum nostrum qui explicabo quod. Officia distinctio dolorum fuga quaerat.