# Components documentation

## Basic panels

A panel is a simple component that has at least one body. It can optionally have one or more headers and one of more footers.

This is a panel body.
This is a panel body.
This is a panel body.
This is a panel body.
Header
This is a panel body.
This is a panel body.
Header
This is a panel body.
Header
This is a panel body.
This is a panel body.
Header
This is a panel body.
Header
This is a panel body.
Header
This is a panel body.
This is a panel body.
This is a panel body.
This is a panel body.
This is a panel body.

## Nesting

Panels can be infinitely nested.

Header
Header
This is a panel body.
Header
This is a panel body.
Header
Header
This is a panel body.
Header
This is a panel body.

## Collapsing

Collapsing is a generic behavior supported by Cascade Framework's JS layer, and is very useful for hiding and showing panel data.

Show Hide panel
This is a panel body.
Show Hide panel
This is a panel body.
Show Hide panel
This is a panel body.
Show Hide panel
Show Hide panel
Show Hide panel
This is a panel body.
Show Hide panel
This is a panel body.
Show Hide panel
This is a panel body.
Show Hide panel
This is a panel body.

## Examples

Herebelow are some common use cases for panels.

Show Hide panel

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Repo list
123
Repo 1
This is one of my coolest repos.
123
Repo 2
This is one of my coolest repos.
123
Repo 3
This is one of my coolest repos.
123
Repo 4
This is one of my coolest repos.
Repo list
123
Repo 5
This is one of my coolest repos.
123
Repo 6
This is one of my coolest repos.
123
Repo 7
This is one of my coolest repos.
123
Repo 8
This is one of my coolest repos.
Form to fill in
First name *
Last name *
Country
Gender
Man Woman
Occupation
Hobbies
Web development Design Programming
Comment *
Cool graph
Irene says:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.

Monica likes this comment!
Chen likes this comment!
My Data

# | ID | Name | Dept | Notes
--- | --- | --- | --- | ---
1 |  |  |  |
2 |  |  |  |
3 |  |  |  |
4 |  |  |  |
5 |  |  |  |

Inventory
Toys
Books
Comics
Clothing
Warning
Something has gone wrong. Please try again!
Leuven
Efteling