<div style="height: 200px; display: flex;" class="b b--b">
    <div class="sep sep--w">
        <div class="sep-l"></div>
        <div class="sep-c">or</div>
        <div class="sep-l"></div>
    </div>
</div>

Creates a horizontal separator line with a text circle in the center of it. Fills available flex space.

Variants

--v: Makes the separator responsive. At $media-large and above, it’s vertical. Otherwise it’s horizontal.

--w: Makes the border color and text white, for use against dark backgrounds.