+

Panels






Panels are the boxes having content/html-elements in it. They are the building blocks for modules like signin. PixelzUI provides five classes.

Types

Following are the two types of panels.

  1. Square
  2. Semi-rounded
=>Other types are based on color class(es).

Classes

Following are the classes to use panels in your scripts.

  1. .pnl
  2. .pnl-hdr
  3. .pnl-bdy
  4. .pnl-ftr
  5. .pnl-srnd
=>Other classes are based on color class(es).

How to use

  1. Add some container or grid class (if required).
  2. <div class="cntr">
     <div class="cl cl2">
  3. Add .pnl as class attribute in <div>.
  4. <div class="pnl"></div>
  5. Add .pnl-srnd as extra class for semi-rounded style.
  6. <div class="pnl pnl-srnd"></div>
  7. Add .pnl-hdr as class attribute of <div> tag inside first <div> for panel header.
  8. <div class="pnl pnl-srnd">
     <div class="pnl-hdr"></div>
    </div>
  9. Add .pnl-bdy as class attribute of <div> tag inside first <div> tag for panel body.
  10. <div class="pnl pnl-srnd">
     <div class="pnl-hdr"></div>
     <div class="pnl-bdy"></div>
    </div>
  11. Add .pnl-ftr as class attribute of <div> tag inside first <div> tag for panel footer.
  12. <div class="pnl pnl-srnd">
     <div class="pnl-hdr"></div>
     <div class="pnl-bdy"></div>
     <div class="pnl-ftr"></div>
    </div>
  13. Add color classes to .pnl-hdr, .pnl-bdy & .pnl-ftr.
  14. <div class="pnl pnl-srnd">
     <div class="pnl-hdr bg-bl t-wt br-bk"></div>
     <div class="pnl-bdy bg-sb t-wt br-bk"></div>
     <div class="pnl-ftr bg-bl t-wt br-bk"></div>
    </div>

Demo

Square Panels

Panel Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel Footer
Panel Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel Footer
Semi-rounded Panels

Panel Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel Footer
Panel Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel Footer

Editing

Edit Classes

Panel Header
A quick brown fox jumps over the lazy dog.
Panel Footer


<div class="pnl pnl-srnd"> <div class="pnl-hdr bg-nb t-wt br-wt">Panel Header</div> <div class="pnl-bdy bg-id t-wt br-wt">A quick brown fox jumps over the lazy dog.</div> <div class="pnl-ftr bg-nb t-wt br-wt">Panel Footer</div> </div>

Leave a Reply

Your email address will not be published. Required fields are marked.