> For the complete documentation index, see [llms.txt](https://jeromeerasmus.gitbook.io/extended-markdown-adf-parser/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jeromeerasmus.gitbook.io/extended-markdown-adf-parser/adf-extensions/element-specifications-panels.md).

# Panels

## Description

ADF panels provide rich content containers with semantic meaning and visual styling. They are used to highlight important information, warnings, errors, success messages, and notes. Panels support nested content including text formatting, lists, code blocks, and other elements.

## .md markdown syntax

### Basic Panel Syntax

```markdown
~~~panel type=info
This is an info panel with basic content.
~~~

~~~panel type=warning title="Important Warning"
This is a warning panel with a custom title.
~~~

~~~panel type=error
This is an error panel for critical information.
~~~

~~~panel type=success
This is a success panel for positive feedback.
~~~

~~~panel type=note
This is a note panel for additional context.
~~~
```

### Panels with Custom Attributes

```markdown
<!-- adf:panel backgroundColor="#e6f3ff" borderColor="#0052cc" padding="16px" -->
~~~panel type=info title="Custom Styled Panel"
This panel has custom background, border, and padding.
~~~
```

### Panels with Rich Content

````markdown
~~~panel type=warning title="Development Guidelines"
Please follow these **important** guidelines:

1. Always test your code
2. Write clear documentation
3. Use meaningful commit messages

```javascript
// Example code
function validate(input) {
  return input.length > 0;
}
````

````
```

## .adf-schema.json schema

```json
{
  "type": "object",
  "properties": {
    "type": {
      "type": "string",
      "const": "panel"
    },
    "attrs": {
      "type": "object",
      "properties": {
        "panelType": {
          "type": "string",
          "enum": ["info", "warning", "error", "success", "note"],
          "description": "Panel semantic type"
        },
        "title": {
          "type": "string",
          "description": "Optional panel title"
        },
        "backgroundColor": {
          "type": "string",
          "pattern": "^#[0-9a-fA-F]{6}$",
          "description": "Custom background color (hex)"
        },
        "borderColor": {
          "type": "string",
          "pattern": "^#[0-9a-fA-F]{6}$",
          "description": "Custom border color (hex)"
        },
        "padding": {
          "type": "string",
          "description": "CSS padding value"
        }
      },
      "required": ["panelType"],
      "additionalProperties": true
    },
    "content": {
      "type": "array",
      "items": {
        "type": "object",
        "description": "Any valid ADF content nodes"
      },
      "minItems": 1
    }
  },
  "required": ["type", "attrs", "content"]
}
```

## Examples

### Info Panel
```markdown
~~~panel type=info
This is general information that might be helpful to know.
````

````

### Warning Panel with Title
```markdown
~~~panel type=warning title="Before You Begin"
Make sure you have backed up your data before proceeding with this operation.
~~~
````

### Error Panel

```markdown
~~~panel type=error title="Critical Issue"
This operation cannot be completed due to insufficient permissions.
~~~
```

### Success Panel

```markdown
~~~panel type=success
Your changes have been saved successfully!
~~~
```

### Note Panel with Complex Content

````markdown
~~~panel type=note title="Technical Details"
**Implementation Notes:**

The following considerations apply:
- Performance impact is minimal
- Backward compatibility is maintained
- Unit tests cover 98% of code paths

```bash
# Run tests
npm test
````

````
```

### Custom Styled Panel
```markdown
<!-- adf:panel backgroundColor="#fff3cd" borderColor="#ffc107" -->
~~~panel type=warning title="Custom Warning"
This panel uses custom yellow styling to match our brand colors.
````

```
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://jeromeerasmus.gitbook.io/extended-markdown-adf-parser/adf-extensions/element-specifications-panels.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.