Separator

Open in Figma View all renders

Horizontal

Both examples here have some dummy content with padding to make sure the separator is visible. Separators have no size beyond a height or width that gives their 'thickness' and they do not have any padding or margins. If a separator needs to space content, consider using a spacing class to give the required margin. 

<div class="flex flex--column">
    <div class="padding-xl-vertical">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
        voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
        adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
        sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
        temporibus accusantium ducimus commodi totam dolore?
    </div>
    <div class="separator"></div>
    <div class="padding-xl-vertical">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
        voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
        adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
        sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
        temporibus accusantium ducimus commodi totam dolore?
    </div>
</div>

Vertical

<div class="flex">
    <div class="padding-xl-horizontal">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
        voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
        adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
        sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
        temporibus accusantium ducimus commodi totam dolore?
    </div>
    <div class="separator-vertical"></div>
    <div class="padding-xl-horizontal">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
        voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
        adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
        sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
        temporibus accusantium ducimus commodi totam dolore?
    </div>
</div>