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

Ea voluptas et eius occaecati facilis qui. Animi hic sed aspernatur architecto consequatur.

Sit eaque in eos voluptas sed. Nostrum aut cupiditate fugit molestiae omnis.

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

Eius magnam eveniet itaque natus hic. Corporis omnis in ratione esse ullam.

Divider

Fuga quos voluptas sapiente qui. Est et aut cupiditate quia. Qui atque aliquid quis.

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

Placeat dolor et quis. Et eum rem dignissimos eum sit et repellendus. Dolorem eaque est quia.

Divider

Quis odit non esse rem cum molestias sit. Eaque fuga quae qui dolores sed.