<!-- ### Begin: Element ### -->
<div id="c680" class="frame frame-default frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Accordion Element
</h2>
</header>
<div class="accordion" id="accordion-513">
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-513-1">
<h4 class="accordion-title">
<a href="#accordion-513-1" class="accordion-title-link" data-toggle="collapse" data-parent="#accordion-513" aria-expanded="true" aria-controls="accordion-513-1">
<span class="accordion-title-link-text">Media Left</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-513-1" class="accordion-collapse collapse show" aria-labelledby="accordion-heading-513-1" data-parent="#accordion-513">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-left">
<div class="accordion-content-item accordion-content-media">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg" title="" alt="" />
</picture>
<figcaption class="caption">
adrian-5jw9OQOQ29c-unsplash.jpg
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion-content-item accordion-content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.
Aliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.
Nam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.
Praesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.
In malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>
<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,
erat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.
Sed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,
a tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.
Sed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.
Quisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.
Proin a velit dui. In tempus lorem et neque interdum placerat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-513-2">
<h4 class="accordion-title">
<a href="#accordion-513-2" class="accordion-title-link collapsed" data-toggle="collapse" data-parent="#accordion-513" aria-expanded="false" aria-controls="accordion-513-2">
<span class="accordion-title-link-text">Media Right</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-513-2" class="accordion-collapse collapse" aria-labelledby="accordion-heading-513-2" data-parent="#accordion-513">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-right">
<div class="accordion-content-item accordion-content-media">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg" title="" alt="" />
</picture>
<figcaption class="caption">
adrian-FlwhX4vtzt0-unsplash.jpg
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion-content-item accordion-content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.
Aliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.
Nam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.
Praesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.
In malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>
<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,
erat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.
Sed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,
a tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.
Sed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.
Quisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.
Proin a velit dui. In tempus lorem et neque interdum placerat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-513-3">
<h4 class="accordion-title">
<a href="#accordion-513-3" class="accordion-title-link collapsed" data-toggle="collapse" data-parent="#accordion-513" aria-expanded="false" aria-controls="accordion-513-3">
<span class="accordion-title-link-text">Media Top</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-513-3" class="accordion-collapse collapse" aria-labelledby="accordion-heading-513-3" data-parent="#accordion-513">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-top">
<div class="accordion-content-item accordion-content-media">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg" title="" alt="" />
</picture>
<figcaption class="caption">
adrian-5jw9OQOQ29c-unsplash.jpg
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion-content-item accordion-content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.
Aliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.
Nam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.
Praesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.
In malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>
<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,
erat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.
Sed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,
a tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.
Sed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.
Quisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.
Proin a velit dui. In tempus lorem et neque interdum placerat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-513-4">
<h4 class="accordion-title">
<a href="#accordion-513-4" class="accordion-title-link collapsed" data-toggle="collapse" data-parent="#accordion-513" aria-expanded="false" aria-controls="accordion-513-4">
<span class="accordion-title-link-text">Media Bottom</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-513-4" class="accordion-collapse collapse" aria-labelledby="accordion-heading-513-4" data-parent="#accordion-513">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-bottom">
<div class="accordion-content-item accordion-content-media">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg" title="" alt="" />
</picture>
<figcaption class="caption">
adrian-FlwhX4vtzt0-unsplash.jpg
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion-content-item accordion-content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.
Aliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.
Nam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.
Praesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.
In malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>
<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,
erat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.
Sed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,
a tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.
Sed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.
Quisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.
Proin a velit dui. In tempus lorem et neque interdum placerat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-513-5">
<h4 class="accordion-title">
<a href="#accordion-513-5" class="accordion-title-link collapsed" data-toggle="collapse" data-parent="#accordion-513" aria-expanded="false" aria-controls="accordion-513-5">
<span class="accordion-title-link-text">No Media</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-513-5" class="accordion-collapse collapse" aria-labelledby="accordion-heading-513-5" data-parent="#accordion-513">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-">
<div class="accordion-content-item accordion-content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.
Aliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.
Nam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.
Praesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.
In malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>
<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,
erat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.
Sed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,
a tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.
Sed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.
Quisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.
Proin a velit dui. In tempus lorem et neque interdum placerat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-513-6">
<h4 class="accordion-title">
<a href="#accordion-513-6" class="accordion-title-link collapsed" data-toggle="collapse" data-parent="#accordion-513" aria-expanded="false" aria-controls="accordion-513-6">
<span class="accordion-title-link-text">Audio Left</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-513-6" class="accordion-collapse collapse" aria-labelledby="accordion-heading-513-6" data-parent="#accordion-513">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-left">
<div class="accordion-content-item accordion-content-media">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="audio">
<div class="embed">
<audio src="https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3" controls>
Your browser does not support the <code>audio</code> element.
</audio>
</div>
<figcaption class="caption">
Insert description
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion-content-item accordion-content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.
Aliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.
Nam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.
Praesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.
In malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>
<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,
erat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.
Sed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,
a tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.
Sed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.
Quisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.
Proin a velit dui. In tempus lorem et neque interdum placerat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-513-7">
<h4 class="accordion-title">
<a href="#accordion-513-7" class="accordion-title-link collapsed" data-toggle="collapse" data-parent="#accordion-513" aria-expanded="false" aria-controls="accordion-513-7">
<span class="accordion-title-link-text">Media Left</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-513-7" class="accordion-collapse collapse" aria-labelledby="accordion-heading-513-7" data-parent="#accordion-513">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-left">
<div class="accordion-content-item accordion-content-media">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="video">
<div class="embed-responsive embed-responsive-16by9">
<video controls>
<source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
<figcaption class="caption">
Insert description
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion-content-item accordion-content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.
Aliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.
Nam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.
Praesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.
In malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>
<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,
erat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.
Sed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,
a tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.
Sed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.
Quisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.
Proin a velit dui. In tempus lorem et neque interdum placerat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element ### -->
{% extends records ? '@wrapper-frame' : '@wrapper-empty' %}
{% set uid = random(999) %}
{% block main %}
{% include "@atom-header" %}
{% set activeElement = pi_flexform.default_element %}
{% set currentVariants = variants %}
<div class="accordion" id="accordion-{{ uid }}">
{% for record in records %}
<div class="accordion-item card">
<div class="accordion-header card-header" id="accordion-heading-{{ uid }}-{{ loop.index }}">
<h4 class="accordion-title">
<a href="#accordion-{{ uid }}-{{ loop.index }}"
class="accordion-title-link{% if activeElement != loop.index %} collapsed{% endif %}"
data-toggle="collapse"
data-parent="#accordion-{{ uid }}"
aria-expanded="{% if activeElement == loop.index %}true{% else %}false{% endif %}"
aria-controls="accordion-{{ uid }}-{{ loop.index }}">
<span class="accordion-title-link-text">{{ record.data.header }}</span>
<span class="accordion-title-link-state"></span>
</a>
</h4>
</div>
<div id="accordion-{{ uid }}-{{ loop.index }}"
class="accordion-collapse collapse{% if activeElement == loop.index %} show{% endif %}"
aria-labelledby="accordion-heading-{{ uid }}-{{ loop.index }}"
data-parent="#accordion-{{ uid }}">
<div class="accordion-body card-body">
<div class="accordion-content accordion-content-{{ record.data.mediaorient }}">
{% if record.files %}
<div class="accordion-content-item accordion-content-media">
{% if record.data.mediaorient %}
{% set imageConfig = "settings.responsiveimages.contentelements.accordion." ~ record.data.mediaorient %}
{% endif %}
{# TODO: {{ dump(imageConfig) }} #}
{# TODO: <bk2k:data.imageVariants as="variants" variants="{currentVariants}" multiplier="{imageConfig.multiplier}" gutters="{imageConfig.gutters}" corrections="{imageConfig.corrections}" />#}
{% include '@partial-gallery' with {
files: record.files,
data: record.data,
settings: record.settings,
variants: record.variants
} %}
</div>
{% endif %}
<div class="accordion-content-item accordion-content-text">
{% include template_from_string(record.data.bodytext) %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{
"bodytext": null,
"categories": null,
"CType": null,
"customId": null,
"date": null,
"frame_class": null,
"header": "Accordion Element",
"header_color": null,
"header_layout": 2,
"header_link": null,
"header_position": null,
"header_style": null,
"layout": null,
"space_after_class": null,
"space_before_class": null,
"space_inner_after_class": null,
"space_inner_before_class": null,
"subheader": null,
"target": null,
"pi_flexform": {
"default_element": 1
},
"records": [
{
"files": [
{
"type": "image",
"url": "../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg",
"properties": {
"description": "adrian-5jw9OQOQ29c-unsplash.jpg"
}
}
],
"data": {
"mediaorient": "left",
"header": "Media Left",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.\nAliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.\nNam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.\nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\nUt a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.\nPraesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.\nIn malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>\n<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,\nerat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.\nSed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,\na tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.\nSed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.\nQuisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.\nProin a velit dui. In tempus lorem et neque interdum placerat.</p>\n"
}
},
{
"files": [
{
"type": "image",
"url": "../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg",
"properties": {
"description": "adrian-FlwhX4vtzt0-unsplash.jpg"
}
}
],
"data": {
"mediaorient": "right",
"header": "Media Right",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.\nAliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.\nNam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.\nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\nUt a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.\nPraesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.\nIn malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>\n<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,\nerat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.\nSed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,\na tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.\nSed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.\nQuisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.\nProin a velit dui. In tempus lorem et neque interdum placerat.</p>\n"
}
},
{
"files": [
{
"type": "image",
"url": "../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg",
"properties": {
"description": "adrian-5jw9OQOQ29c-unsplash.jpg"
}
}
],
"data": {
"mediaorient": "top",
"header": "Media Top",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.\nAliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.\nNam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.\nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\nUt a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.\nPraesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.\nIn malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>\n<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,\nerat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.\nSed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,\na tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.\nSed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.\nQuisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.\nProin a velit dui. In tempus lorem et neque interdum placerat.</p>\n"
}
},
{
"files": [
{
"type": "image",
"url": "../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg",
"properties": {
"description": "adrian-FlwhX4vtzt0-unsplash.jpg"
}
}
],
"data": {
"mediaorient": "bottom",
"header": "Media Bottom",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.\nAliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.\nNam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.\nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\nUt a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.\nPraesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.\nIn malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>\n<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,\nerat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.\nSed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,\na tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.\nSed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.\nQuisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.\nProin a velit dui. In tempus lorem et neque interdum placerat.</p>\n"
}
},
{
"data": {
"header": "No Media",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.\nAliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.\nNam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.\nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\nUt a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.\nPraesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.\nIn malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>\n<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,\nerat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.\nSed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,\na tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.\nSed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.\nQuisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.\nProin a velit dui. In tempus lorem et neque interdum placerat.</p>\n"
}
},
{
"files": [
{
"type": "audio",
"url": "https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3",
"properties": {
"title": "Audio Title",
"description": "Insert description"
}
}
],
"data": {
"mediaorient": "left",
"header": "Audio Left",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.\nAliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.\nNam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.\nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\nUt a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.\nPraesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.\nIn malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>\n<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,\nerat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.\nSed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,\na tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.\nSed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.\nQuisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.\nProin a velit dui. In tempus lorem et neque interdum placerat.</p>\n"
}
},
{
"files": [
{
"type": "media",
"url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
"properties": {
"title": "Media (Video) Title",
"description": "Insert description"
}
}
],
"data": {
"mediaorient": "left",
"header": "Media Left",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus lorem ut efficitur ultrices.\nAliquam efficitur ante non molestie sodales. Nunc ullamcorper tempus diam, ac pretium urna vestibulum sed.\nNam placerat nulla in fermentum sagittis. Curabitur eget sapien nec quam egestas faucibus.\nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\nUt a augue sed tellus laoreet porta nec sit amet urna. Duis finibus metus commodo tortor auctor ullamcorper ac sed urna.\nPraesent interdum, velit ut bibendum vulputate, elit augue congue eros, at egestas nunc arcu non sem.\nIn malesuada semper neque cursus sagittis. Morbi ac risus eu risus mollis ornare consequat eu leo.</p>\n<p>Donec lacinia pretium enim, non tristique urna dignissim non. Fusce volutpat, arcu et iaculis lobortis,\nerat neque rutrum mauris, eu cursus nulla ante in ipsum. Vestibulum sagittis dictum turpis in placerat.\nSed mollis finibus nulla sit amet dapibus. Donec blandit, nibh et ultrices efficitur, ligula justo mollis elit,\na tincidunt diam neque gravida dolor. Vivamus a turpis sed magna eleifend elementum. Nullam pretium tincidunt mattis.\nSed vel felis turpis. Integer sit amet turpis quam. Duis in dapibus augue. In cursus rhoncus velit ut hendrerit.\nQuisque sit amet est quis quam mattis venenatis. Aliquam diam purus, venenatis ut malesuada ut, venenatis eu sem.\nProin a velit dui. In tempus lorem et neque interdum placerat.</p>\n"
}
}
]
}
.accordion-item.card {
background: none;
border: none !important;
box-shadow: none;
.card-header {
background: none;
margin: 0;
padding: 0;
}
// removing Bootstrap package icon (+)
.accordion-title-link-state {
display: none;
}
}
.accordion-item + .accordion-item {
margin-top: 0;
}
.accordion-item:last-child {
border-bottom: $border-width solid $border-color !important;
}
No notes defined.