• Patterns
  • Panels

Panel, with padding

I've got a small top and bottom padding

I've got a medium top and bottom padding

I've got a large top and bottom padding

I've got a small top padding

I've got a medium top padding

I've got a large top padding

I've got a small bottom padding

I've got a medium bottom padding

I've got a large bottom padding

Usage notes

Use for visually separating elements with padding, when you have a background that needs extending past the initial boundary of the element (good when you need to fine-tune layout spacing). Otherwise use the margin element.

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

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

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