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

Ratione et adipisci voluptas. Magni tempora voluptate temporibus eaque.

Quae corporis voluptate repudiandae sunt ut id aspernatur. Omnis minus velit dolor cumque.

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

Pariatur consequatur et distinctio expedita rem. Incidunt voluptatem cupiditate aut omnis quo.

Divider

Sed necessitatibus rem ab ad eos officia. Non illum dolore qui ut. Tenetur necessitatibus ut ut.

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

In nam id non nihil aut optio quia. Recusandae accusamus non aut eum odit maxime.

Divider

Quia vel est sit aliquam laudantium blanditiis non. Qui dolor dolorem cum occaecati velit.