{
  "panel" : {
    "title": "Panel",
    "status": {
      "ready": true
    },
    "introduction": "<p>Panels create visual blocks on the page, which create more obvious groupings of related content or controls. They visually up the affordance of related elements.</p>",
    "examples": [
      {
        "description": "Panel accordion",
        "template": "panel-accordion",
        "template-data": {
          "attributes": "data-js=\"accordion-segment\"",
          "panel__head": {
            "modifiers": ["--grey", "--short"],
            "attributes": "data-js=\"accordion-toggle\"",
            "contents": "<h4 class=\"heading--mono panel__heading\">Panel head</h4>",
            "action": {
              "action-text": "toggle",
              "modifiers": ["--16x16", "--up-grey"]
            }
          },
          "panel__content": {
            "attributes": "data-js=\"accordion-content\"",
            "contents": "<p>Panel content</p>"
          }
        }
      }
    ],
    "dependencies": [
      "src/styles/base/*.scss",
      "src/styles/components/blocks/_panel.scss",
      "src/scripts/modules/jquery.pfAccordion.js"
    ],
    "usages": {
      "body": [
        [
          "<code>.panel</code>",
          "Placed on outer-most tag that will contain the panel",
          "Required"
        ],
        [
          "<code>.panel__head</code>",
          "Used for a panel header",
          "Optional"
        ],
        [
          "<code>.panel__action</code>",
          "Added to an icon-styled tag, which should be the first child of <code>.panel__head</code>, when wanting to display an action icon on the top right of the panel. Customise with necessary icon classes as needed.",
          "Optional"
        ],
        [
          "<code>.panel__content</code>",
          "Used for a panel content",
          "Required"
        ],
        [
          "<code>.panel__foot</code>",
          "Used for a panel footer",
          "Optional"
        ],
        [
          "<code>.panel--centered</code>",
          "Center aligns panel text and images",
          "Optional"
        ],
        [
          "<code>.panel__[head|content|foot]--grey</code>",
          "Gives the panel or panel section grey styling",
          "Optional"
        ],
        [
          "<code>.panel__[head|content|foot]--blue</code>",
          "Gives the panel or panel section blue styling",
          "Optional"
        ],
        [
          "<code>.panel__[head|content|foot]--bright-blue</code>",
          "Gives the panel or panel section a more intense blue styling",
          "Optional"
        ],
        [
          "<code>.panel__[head|content|foot]--fat</code>",
          "Adds more padding to the relevant panel elements",
          "Optional"
        ],
        [
          "<code>.panel__[head|content|foot]--short</code>",
          "Reduces vertical padding of the relevant panel elements",
          "Optional"
        ],
        [
          "<code>.panel__[head|content|foot]--tall</code>",
          "Adds extra vertical padding of the relevant panel elements",
          "Optional"
        ]
      ]
    }
  }
}