Panels

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic Sample

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example

Panel with heading

Easily add a heading container to your panel with .panel-heading.

Panel title

Panel content

Panel with footer

Wrap buttons or secondary text in .panel-footer.

Panel content

Header & Footer

Responsive panel sample, with features.

Panel title

Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est. Vestibulum in pretium turpis. Nullam tincidunt turpis lacus, id convallis quam molestie quis. Quisque urna magna, vulputate et neque a, ullamcorper vestibulum enim. Pellentesque eros sapien, consectetur ac libero in, tincidunt placerat mauris. Morbi vel mi mollis, lobortis felis eget, mattis dui. Ut ultricies tortor non posuere egestas. Sed vestibulum feugiat sapien. Donec laoreet ex quis mi pellentesque ultrices. Suspendisse porta, elit sed gravida facilisis, leo lectus suscipit neque, at ullamcorper nibh nunc vel orci. Proin rutrum elit ante, at laoreet ante cursus a. Morbi ante nisi, rutrum eu turpis vel, dapibus ullamcorper sapien. Aenean in enim sed dui tincidunt interdum vulputate in sapien. Donec vitae sapien auctor, lobortis urna placerat, blandit odio.

Buttons

Use default buttons in ul.panel-btn to get great styled panel buttons.

Panel title

Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est. Vestibulum in pretium turpis. Nullam tincidunt turpis lacus, id convallis quam molestie quis. Quisque urna magna, vulputate et neque a, ullamcorper vestibulum enim. Pellentesque eros sapien, consectetur ac libero in, tincidunt placerat mauris. Morbi vel mi mollis, lobortis felis eget, mattis dui. Ut ultricies tortor non posuere egestas. Sed vestibulum feugiat sapien. Donec laoreet ex quis mi pellentesque ultrices. Suspendisse porta, elit sed gravida facilisis, leo lectus suscipit neque, at ullamcorper nibh nunc vel orci. Proin rutrum elit ante, at laoreet ante cursus a. Morbi ante nisi, rutrum eu turpis vel, dapibus ullamcorper sapien. Aenean in enim sed dui tincidunt interdum vulputate in sapien. Donec vitae sapien auctor, lobortis urna placerat, blandit odio.

Collapse Panel

Use class handler .panel-collapse to collapse panel.

Panel title

Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est.

Collapsed

Add class .panel-collapsed to .panel to get collapsed panel by default.

Panel title

Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est.

Delete Panel

Use function dev_panel_remove(panel,callback); to delete panel.

Panel title

Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est.

Fullscreen Mode

Use function dev_panel_fullscreen(panel); to get fullscreen mode of panel.

Panel title

Aliquam et ex accumsan, maximus nibh ac, sagittis magna. Nam et ante facilisis, venenatis ligula eleifend, convallis est.

  • Hi, you have a second? Need to ask you something. about 1h ago
  • Sure i have... 59min ago
  • It's about latest design you did... 14min ago
  • I will do my best to help you 2min ago