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) }}
{{ fake()->text(100) }}
<x-moonshine::divider />
{{ fake()->text(100) }}
{{ fake()->text(100) }}
<x-moonshine::divider />
{{ fake()->text(100) }}
{{ fake()->text(100) }}
<x-moonshine::divider />
{{ fake()->text(100) }}
You can use text as a separator. To do 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) }}
{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" />
{{ fake()->text(100) }}
{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" />
{{ fake()->text(100) }}
{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" />
{{ fake()->text(100) }}
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) }}
{{ 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) }}
{{ fake()->text(100) }}
<x-moonshine::divider label="Divider" :centered="true" />
{{ fake()->text(100) }}