Documentation

Heads Up! Components & docs are subject to change until official v1.0 release. ×

Panels

This is a basic panel
This is a basic panel w/ a footer
Panel
This is a basic panel w/ a header
Panel Alert
This is a basic panel w/ a color modifier (options: red, cream, dark-gray)

Panel Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem harum cupiditate quae aliquid quia optio suscipit ex temporibus adipisci.

Panel Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem harum cupiditate quae aliquid quia optio suscipit ex temporibus adipisci.

Panel Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem harum cupiditate quae aliquid quia optio suscipit ex temporibus adipisci.


Project Pizza

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem harum cupiditate quae aliquid quia optio suscipit ex temporibus adipisci.

Project Mental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem harum cupiditate quae aliquid quia optio suscipit ex temporibus adipisci.

Project Circuit Deal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem harum cupiditate quae aliquid quia optio suscipit ex temporibus adipisci.


<div class="panel">
  <div class="panel__content">This is a basic panel</div>
</div>

<div class="panel">
  <div class="panel__content">This is a basic panel w/ a footer</div>
  <div class="panel__footer"><strong>Pro Tip!</strong> Smiling Makes Others Smile :)</div>
</div>

<div class="panel">
  <div class="panel__header">
    <strong>Panel</strong>
  </div>
  <div class="panel__content">This is a basic panel w/ a header</div>
</div>

<div class="panel panel--red">
  <div class="panel__header">
    <strong>Panel Alert</strong>
  </div>
  <div class="panel__content">This is a basic panel w/ a color modifier</div>
  <div class="panel__footer"><strong>Warning:</strong> Are You Sure You Want To Do That?</div>
</div>

<div class="panel">
  <div class="panel__img" style="background-image: url(...)"></div>
  <div class="panel__content">
    <p><strong>Project Pizza</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem harum cupiditate quae aliquid quia optio suscipit ex temporibus adipisci.</p>
  </div>
</div>