panel docs

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

panel

Basic Panel A simple interactive element best used in story telling or displaying headshots. Demo
Alt text.

Name

Title, Company

Twig
{% set signifier %}
  {% include '@bolt-elements-image/image.twig' with {
    ...
  } only %}
{% endset %}

{% set title %}
  {% include '@bolt-elements-type/type.twig' with {
    ...
  } only %}
{% endset %}

{% include '@bolt-components-panel/panel.twig' with {
  signifier: signifier,
  title: title,
} only %}
HTML
Not available in plain HTML. Please use Twig.

panel content

Panel Content Adding content to a panel will create the interaction for revealing the additional content.
Important Notes: If more content is added, the height of the Panel will be increased to match. This will crop the signifier image to create uniformity. If multiple Panels are placed in a layout, they will all match the height of the tallest one.
Demo
Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Twig
{% include '@bolt-components-panel/panel.twig' with {
    signifier: signifier,
    title: title,
    content_header: content_header,
    content_main: content,
    content_footer: content_footer,
  } only %}
HTML
Not available in plain HTML. Please use Twig.

panel short reveal

Panel Short Reveal Instead of filling the whole Panel, the height of revealed content can be dictated by the height of the content itself.
Important Notes: More content will force the revealed panel to be taller.
Demo
Alt text.

Lorem ipsum

Alt text.

Lorem ipsum

Alt text.

Lorem ipsum

Alt text.

Lorem ipsum

Twig
{% include '@bolt-components-panel/panel.twig' with {
    signifier: signifier,
    title: title,
    content_header: content_header,
    content_main: content,
    content_footer: content_footer,
    short_reveal: true,
  } only %}
HTML
Not available in plain HTML. Please use Twig.

panel use case slideshow story

Panel Use Case Slideshow A slideshow can be used to display several Panels in a format conducive to story telling.
Important Notes: If the slideshow nav buttons are covering content, know that you can set nav button positiont to outside.
Demo
Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Alt text.

Lorem Ipsum

Twig
{% set slides %}
    {% include '@bolt-components-slideshow/slideshow-slide.twig' with {
      content: panel,
    } only %}
    ...
  {% endset %}

  {% include '@bolt-components-slideshow/slideshow.twig' with {
    content: slides,
    ...
  } only %}
HTML
Not available in plain HTML. Please use Twig.