{% 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 %}
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
|
|
npm install @bolt/components-panel
{% 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 %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
{% include '@bolt-components-panel/panel.twig' with {
signifier: signifier,
title: title,
content_header: content_header,
content_main: content,
content_footer: content_footer,
} only %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% 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 %}
{% set slides %}
{% include '@bolt-components-slideshow/slideshow-slide.twig' with {
content: panel,
} only %}
...
{% endset %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
...
} only %}