• Patterns
  • Panels

Panel, separated

I've got a top and bottom border

My border is only a top border.

My border is a large top border.

Mine's a bottom border.

Mine's a large bottom border.

Usage notes

Use for visually separating elements and borders

  
<div>
  <div class="panel panel--separated">
    <p class="flush">I&apos;ve got a top and bottom border</p>
  </div>
  <div class="panel panel--separated--top">
    <p>My border is only a top border.</p>
  </div>
  <div class="panel panel--separated--top--large">
    <p>My border is a large top border.</p>
  </div>
  <div class="panel panel--separated--bottom">
    <p>Mine&apos;s a bottom border.</p>
  </div>
  <div class="panel panel--separated--bottom--large">
    <p>Mine&apos;s a large bottom border.</p>
  </div>
</div>