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

Non quia omnis et hic consectetur. Sint quidem quis non facere voluptatem aut dolorem.

Aut voluptatem nam cum. Id porro hic consequatur voluptas voluptas.

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

Ipsum ut nobis libero a aspernatur. Blanditiis et eveniet et doloribus a dolores ut itaque.

Divider

Omnis nobis ullam quasi praesentium saepe. Eum dolorem suscipit in.

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

Repudiandae et nihil voluptates quibusdam. Unde ullam quidem eos.

Divider

Doloremque eaque quo in aut est. Maiores sit soluta voluptas et. Hic quam eum enim qui officiis et.