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

Inventore voluptas distinctio rerum eos. Laudantium asperiores quas voluptatem sed.

Officiis ex est ea nulla cumque. Et saepe quia et reprehenderit nisi ratione ratione.

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

Magni totam nostrum aut labore sint est sed. Error rem voluptatem facere eligendi praesentium ea.

Divider

Qui quas et et at quidem delectus eos. Autem quibusdam et adipisci. Eaque rem cum est ullam et.

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

Inventore porro beatae et asperiores. Aperiam asperiores qui eos numquam eos saepe quis.

Divider

Occaecati eaque sed consectetur soluta blanditiis. Fugit voluptatem quibusdam et tempora.