Panel

An interactive UI element that can display additional content on interaction.
Twig Usage 
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: 'https://placehold.co/400x300',
      width: 400,
      height: 300,
    },
  } only %}
{% endset %}

{% include '@bolt-components-panel/panel.twig' with {
  signifier: image,
  title: 'This is a panel component.',
} only %}
 Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-panel> tag.

 object —
  • —
signifier *

This image will is visible before interaction.

 any —
  • —
title *

This content is visible before interaction.

 any —
  • —
content_header

This content is not visible until after interaction. It will be at the top of the panel.

 any —
  • —
content_main

This content is not visible until after interaction.

 any —
  • —
content_footer

This content is not visible until after interaction. It will be pinned to the bottom of the panel.

 any —
  • —
short_reveal

Decides how much of the original panel will be covered to reveal the content.

 boolean false
  • —
Install Install 
npm install @bolt/components-panel
Dependencies @bolt/core