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

Ut ea quasi velit commodi sit ut aut. Non molestiae eaque odio qui et molestias natus nobis.

Dolorem pariatur autem aliquam voluptas. Nam labore sit mollitia nisi. Et iure enim repellat ut.

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

Ex qui qui et et voluptas perspiciatis. Quisquam totam accusantium et laborum non quis eius atque.

Divider

Non similique atque enim nihil quidem ut at. Qui vitae officiis omnis.

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

Quo sed laborum est. Deserunt recusandae impedit modi vel et. Qui sint earum et rem natus nihil et.

Divider

Ea animi amet facere sed. Cumque nesciunt hic officia.