Divider

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

# Basics

The moonshine::divider component allows you to create a stylized content divider

{{ fake()->text(100) }}
<x-moonshine::divider />
{{ fake()->text(100) }}
Nemo illo voluptas voluptas earum qui quae. Voluptatum in et unde officiis dolor aliquid.
Reprehenderit et qui qui fuga. Animi eveniet esse quo. Omnis qui non laborum quo sit dolorem.

# 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) }}
Nihil eum natus laudantium. Aperiam cupiditate dolor voluptas est ad.
Divider
Amet ut modi ad inventore. Dolor et fugiat itaque commodi. Illum deserunt eligendi consectetur.

The centered parameter allows you to center the text

{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" :centered="true" />
{{ fake()->text(100) }}
Quia nihil accusamus sit et sit aut quod. Error nulla odit et.
Divider
Natus consequatur sequi reprehenderit aut. Voluptatum officia et deserunt hic officiis dolor.