# Panel

A Panel is created by surrounding a block of content with === and including a title for the Panel.

=== My Panel
This is a Panel. Expanded by default.
===

The title must be separated from the opening === by one space. The pattern === My Panel will work as expected, and ===My Panel will not.

Multiple Panels can be stacked by repeating Panel component configurations.

=== Panel 1
Content 1
=== Panel 2
Content 2
===

By default, Panels are collapsible and will initially render in their expanded state. You can configure Panels to initially render in their collapsed state by using ==- specifier.

==- My Panel
This is a collapsed Panel. :+1:
===

Either just the opening ==- can be configured, or both opening and closing ==- can be used.

==- My Panel
This is another collapsed Panel.
==-

Any content can be added inside a Panel, include other components such as a code block and tables.

=== Code Sample
```js
const msg = "Hello, world";

console.log(msg);
```

Name  | Type  | Value  | Description
---   | ---   | ---    | ---
prop1 | type1 | value1 | A `type1` property
prop2 | type2 | value2 | A `type2` property
===

const msg = "Hello, world";

console.log(msg);

Multiple Panel components can be stacked into a group by repeating Panel component configurations.

A basic scenario is grouping two Panels:

=== Panel 1
Content for the **first** panel.
=== Panel 2
Content for the **second** panel.
===

As well, individual Panels within a stack can be configured as collapsed.

The following sample demonstrates a two-panel stack with the second Panel being collapsed.

=== Expanded Panel

Panels are expanded by default, but can be configured as collapsed too!

==- Collapsed Panel

Add any content or components inside a Panel.

===