#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.
===

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
===

Panel 1

Content 1

Panel 2

Content 2

Currently, Panel components cannot be nested within each other, only stacked. We're hoping to support nesting Panels in a future release. Let us know if you require the functionality.

All other components can be nested within any Panel component.

#Collapsed

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:
===

My Panel

This is a collapsed Panel. 👍

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


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

My Panel

This is another collapsed Panel.

#Inner content

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
===

Code Sample

const msg = "Hello, world";

console.log(msg);

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

#Stacking

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.
===

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.

===

Expanded Panel

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

Collapsed Panel

🥳 You found me!

#Accordion

Panels can be used to create an accordion-style layout, perfect for FAQs or collapsible content sections. Here's an example with three collapsed panels:


==- What is Retype?
Retype is a modern documentation generator that helps you create beautiful documentation websites from your Markdown files. It's designed to be fast, flexible, and easy to use.

==- How do I get started?
Getting started with Retype is simple! Just install the Retype CLI and run `retype init` in your project directory. Then add your Markdown files and run `retype start` to preview your documentation locally.

==- Where can I deploy my Retype site?
Retype sites can be deployed to any static hosting service like GitHub [Pages](/hosting/github-pages.md), [Netlify](/hosting/netlify.md), Vercel, or your own web server.
===

What is Retype?

Retype is a modern documentation generator that helps you create beautiful documentation websites from your Markdown files. It's designed to be fast, flexible, and easy to use.

How do I get started?

Getting started with Retype is simple! Just install the Retype CLI and run retype init in your project directory. Then add your Markdown files and run retype start to preview your documentation locally.

Where can I deploy my Retype site?

Retype sites can be deployed to any static hosting service like GitHub Pages, Netlify, Vercel, or your own web server.

component