• Patterns
  • Panels

Panel, with margin

I've got a small top and bottom margin

I've got a medium top and bottom margin

I've got a large top and bottom margin

I've got a small top margin

I've got a medium top margin

I've got a large top margin

I've got a small bottom margin

I've got a medium bottom margin

I've got a large bottom margin

Usage notes

Use for visually separating elements with margin.

  
<div>
  <div class="panel--mar-small">
    <p class="flush">I&apos;ve got a small top and bottom margin</p>
  </div>
  <div class="panel--mar">
    <p class="flush">I&apos;ve got a medium top and bottom margin</p>
  </div>
  <div class="panel--mar-large">
    <p class="flush">I&apos;ve got a large top and bottom margin</p>
  </div>

  <div class="panel--top-mar-small">
    <p class="flush">I&apos;ve got a small top margin</p>
  </div>
  <div class="panel--top-mar">
    <p class="flush">I&apos;ve got a medium top margin</p>
  </div>
  <div class="panel--top-mar-large">
    <p class="flush">I&apos;ve got a large top margin</p>
  </div>

  <div class="panel--bottom-mar-small">
    <p class="flush">I&apos;ve got a small bottom margin</p>
  </div>
  <div class="panel--bottom-mar">
    <p class="flush">I&apos;ve got a medium bottom margin</p>
  </div>
  <div class="panel--bottom-mar-large">
    <p class="flush">I&apos;ve got a large bottom margin</p>
  </div>
</div>