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

Repellat harum beatae similique ut. Quo tempore id et debitis.

Vitae praesentium quo quam impedit et doloribus rem mollitia. Animi sit est suscipit quod.

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

Qui ut ut adipisci unde. Tenetur quasi magni quia molestiae. Soluta illo et non repellat cum quia.

Divider

Aut distinctio ullam sed sint eos repudiandae. Magni sed quo minus. Enim eaque officiis quibusdam.

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

Et repellendus et quasi est. Qui magni et aut dicta atque expedita quis.

Divider

At delectus repellendus blanditiis. Earum voluptatem vel cupiditate et optio iusto explicabo.