Pipe Separator

To horizontally separate linear content into sections clearly when clarity and distinction between elements are needed.

If it creates visual clutter as it can negatively impact readability.
If other visual cues already provide sufficient differentiation between content.

ReactVanilla

<PipeSeparator />

<PipeSeparator />

<span class="swan-pipe-separator" role="presentation">|</span>

<span class="swan-pipe-separator" role="presentation">|</span>

ReactVanilla

<>
  First item
  <PipeSeparator />
  Second item
  <PipeSeparator />
  Third item
</>

<>
  First item
  <PipeSeparator />
  Second item
  <PipeSeparator />
  Third item
</>

<div>
  First item
  <span class="swan-pipe-separator">|</span>
  Second item
  <span class="swan-pipe-separator">|</span>
  Third item
</div>

<div>
  First item
  <span class="swan-pipe-separator">|</span>
  Second item
  <span class="swan-pipe-separator">|</span>
  Third item
</div>

Related