{% include '@bolt-components-info-section/info-section.twig' with {
label: {
content: 'This is an info section',
tag: 'h2',
},
content: 'This is the section content.',
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Applies extra HTML attributes to the parent container. |
object
| — |
|
label
|
Label of the info section. |
object
| — |
|
content
|
Content of the info section. |
any
| — |
|
details_link
|
Render a link or button that leads to more details. |
object
| — |
|
open
|
Set the info section to open by default. This only applies when the viewport is below the medium breakpoint. |
boolean
|
false
|
|
collapsible
|
Set the info section to be collapsible by default. Set to |
boolean
|
true
|
|
npm install @bolt/components-info-section
{% include '@bolt-components-info-section/info-section.twig' with {
label: {
content: 'This is an info section',
tag: 'h3',
},
content: 'This is the section content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit labore hic officia maiores ut sequi ipsam nihil repudiandae numquam quidem, molestiae amet aliquid sapiente sed odio quo aspernatur mollitia a.',
details_link: {
label: 'This is the details link',
attributes: {
type: 'button',
'data-bolt-modal-target': '.js-modal-target',
},
},
} only %}
{# Optionally create a modal for more details #}
{% include '@bolt-components-modal/modal.twig' with {
content: 'More details about this section.',
attributes: {
class: 'js-modal-target',
},
} only %}
{% include '@bolt-components-info-section/info-section.twig' with {
label: {
content: 'This is an info section',
tag: 'h3',
},
content: 'This is the section content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit labore hic officia maiores ut sequi ipsam nihil repudiandae numquam quidem, molestiae amet aliquid sapiente sed odio quo aspernatur mollitia a.',
details_link: {
label: 'This is the details link',
attributes: {
type: 'button',
'data-bolt-modal-target': '.js-modal-target',
},
},
collapsible: false,
} only %}
{# Optionally create a modal for more details #}
{% include '@bolt-components-modal/modal.twig' with {
content: 'More details about this section.',
attributes: {
class: 'js-modal-target',
},
} only %}