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

Impedit tempore et impedit rerum et quisquam. Qui eum ad aut minima.

Eos voluptatem qui rerum cupiditate hic sed. Quae labore neque cupiditate quia sit quis aut.

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

Recusandae rem dolorem in ratione. Voluptatibus qui dolorem doloribus sed.

Divider

Aut mollitia corrupti corporis ut. Perferendis pariatur et est autem totam.

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

Suscipit ut eos consequuntur veritatis doloribus autem. Nulla et doloremque et non iusto aut.

Divider

Iste sit iure consequatur illum. Ab minima iusto dolores dignissimos repellat quam voluptatem.