Skip to content

Separator

The separator is a proton whose only task is to insert a horizontal line separating two elements.The line has sizes defining the 'margin' line relative to the elements it separates.

Props

size
Margin size
type:String
default:md
values:xs, sm, md, lg, xl

Examples

Standard use
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.
html
<div class="flex w-full flex-col">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin
    rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.
  </div>
  <separator />
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin
    rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.
  </div>
  <separator size="xl" />
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin
    rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.
  </div>
</div>