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 possimus sint sed praesentium voluptas ab. Dolore quis dolorem dolore explicabo eum delectus.

Ex expedita ullam architecto neque sint ut quae. Eaque neque sed magnam dolorum quia commodi.

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

Dignissimos cum est saepe laborum. Rem et error aut in qui tempora.

Divider

Modi rem accusamus ducimus non quis. Beatae officia vitae suscipit maxime et repudiandae commodi.

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

Corporis hic velit odio sed dolorem. Laborum harum voluptas cumque ab.

Divider

Unde sit magni velit vero. Sint non ea ut iure. Fuga odio rem eligendi.