<!-- ### Begin: Element tab ### -->
<div id="c189" class="frame frame-default frame-type-tab 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">
Tab / Accordion Element
</h2>
</header>
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-medialeft" href="#pane-medialeft" class="nav-link active" data-toggle="tab" role="tab">
Media Left
</a>
</li>
<li class="nav-item">
<a id="tab-mediaright" href="#pane-mediaright" class="nav-link" data-toggle="tab" role="tab">
Media Right
</a>
</li>
<li class="nav-item">
<a id="tab-mediatop" href="#pane-mediatop" class="nav-link" data-toggle="tab" role="tab">
Media Top
</a>
</li>
<li class="nav-item">
<a id="tab-mediabottom" href="#pane-mediabottom" class="nav-link" data-toggle="tab" role="tab">
Media Bottom
</a>
</li>
<li class="nav-item">
<a id="tab-nomedia" href="#pane-nomedia" class="nav-link" data-toggle="tab" role="tab">
No Media
</a>
</li>
<li class="nav-item">
<a id="tab-audioleft" href="#pane-audioleft" class="nav-link" data-toggle="tab" role="tab">
Audio Left
</a>
</li>
<li class="nav-item">
<a id="tab-medialeft" href="#pane-medialeft" class="nav-link" data-toggle="tab" role="tab">
Media Left
</a>
</li>
</ul>
<div id="content965" class="tab-content" role="tablist">
<div id="pane-medialeft" class="accordion tab-pane fade show active" role="tabpanel" aria-labelledby="tab-medialeft">
<div class="accordion-header" role="tab" id="heading-medialeft">
<a data-toggle="collapse" href="#collapse-medialeft" aria-expanded="true" aria-controls="collapse-medialeft">
Media Left
</a>
</div>
<div id="collapse-medialeft" class="collapse show" data-parent="#content965" role="tabpanel" aria-labelledby="heading-medialeft">
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-left">
<div class="tab-pane-content-item tab-pane-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="tab-pane-content-item tab-pane-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 id="pane-mediaright" class="accordion tab-pane fade" role="tabpanel" aria-labelledby="tab-mediaright">
<div class="accordion-header" role="tab" id="heading-mediaright">
<a data-toggle="collapse" href="#collapse-mediaright" aria-expanded="false" aria-controls="collapse-mediaright">
Media Right
</a>
</div>
<div id="collapse-mediaright" class="collapse" data-parent="#content965" role="tabpanel" aria-labelledby="heading-mediaright">
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-right">
<div class="tab-pane-content-item tab-pane-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="tab-pane-content-item tab-pane-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 id="pane-mediatop" class="accordion tab-pane fade" role="tabpanel" aria-labelledby="tab-mediatop">
<div class="accordion-header" role="tab" id="heading-mediatop">
<a data-toggle="collapse" href="#collapse-mediatop" aria-expanded="false" aria-controls="collapse-mediatop">
Media Top
</a>
</div>
<div id="collapse-mediatop" class="collapse" data-parent="#content965" role="tabpanel" aria-labelledby="heading-mediatop">
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-top">
<div class="tab-pane-content-item tab-pane-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="tab-pane-content-item tab-pane-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 id="pane-mediabottom" class="accordion tab-pane fade" role="tabpanel" aria-labelledby="tab-mediabottom">
<div class="accordion-header" role="tab" id="heading-mediabottom">
<a data-toggle="collapse" href="#collapse-mediabottom" aria-expanded="false" aria-controls="collapse-mediabottom">
Media Bottom
</a>
</div>
<div id="collapse-mediabottom" class="collapse" data-parent="#content965" role="tabpanel" aria-labelledby="heading-mediabottom">
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-bottom">
<div class="tab-pane-content-item tab-pane-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="tab-pane-content-item tab-pane-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 id="pane-nomedia" class="accordion tab-pane fade" role="tabpanel" aria-labelledby="tab-nomedia">
<div class="accordion-header" role="tab" id="heading-nomedia">
<a data-toggle="collapse" href="#collapse-nomedia" aria-expanded="false" aria-controls="collapse-nomedia">
No Media
</a>
</div>
<div id="collapse-nomedia" class="collapse" data-parent="#content965" role="tabpanel" aria-labelledby="heading-nomedia">
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-">
<div class="tab-pane-content-item tab-pane-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 id="pane-audioleft" class="accordion tab-pane fade" role="tabpanel" aria-labelledby="tab-audioleft">
<div class="accordion-header" role="tab" id="heading-audioleft">
<a data-toggle="collapse" href="#collapse-audioleft" aria-expanded="false" aria-controls="collapse-audioleft">
Audio Left
</a>
</div>
<div id="collapse-audioleft" class="collapse" data-parent="#content965" role="tabpanel" aria-labelledby="heading-audioleft">
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-left">
<div class="tab-pane-content-item tab-pane-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="tab-pane-content-item tab-pane-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 id="pane-medialeft" class="accordion tab-pane fade" role="tabpanel" aria-labelledby="tab-medialeft">
<div class="accordion-header" role="tab" id="heading-medialeft">
<a data-toggle="collapse" href="#collapse-medialeft" aria-expanded="false" aria-controls="collapse-medialeft">
Media Left
</a>
</div>
<div id="collapse-medialeft" class="collapse" data-parent="#content965" role="tabpanel" aria-labelledby="heading-medialeft">
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-left">
<div class="tab-pane-content-item tab-pane-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="tab-pane-content-item tab-pane-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 tab ### -->
{% extends "@wrapper-frame" %}
{% import "@macro-render" as render %}
{% set CType = 'tab' %}
{% set uid = random(999) %}
{% block main %}
{% include "@atom-header" %}
<ul id="tabs" class="nav nav-tabs" role="tablist">
{% for record in records %}
<li class="nav-item">
<a id="tab-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
href="#pane-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
class="nav-link{% if loop.first %} active{% endif %}"
data-toggle="tab"
role="tab"
>
{{ record.data.header }}
</a>
</li>
{% endfor %}
</ul>
<div id="content{{ uid }}" class="tab-content" role="tablist">
{% for record in records %}
<div id="pane-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
class="accordion tab-pane fade{% if loop.first %} show active{% endif %}"
role="tabpanel"
aria-labelledby="tab-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
>
<div class="accordion-header" role="tab" id="heading-{{ record.data.header|replace({' ': '', '&': ''})|lower }}">
{# Note: `data-parent` removed from here #}
<a data-toggle="collapse"
href="#collapse-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
aria-expanded="{% if loop.first %}true{% else %}false{% endif %}"
aria-controls="collapse-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
>
{{ record.data.header }}
</a>
</div>
{# Note: New place of `data-parent` #}
<div id="collapse-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
class="collapse{% if loop.first %} show{% endif %}"
data-parent="#content{{ uid }}"
role="tabpanel"
aria-labelledby="heading-{{ record.data.header|replace({' ': '', '&': ''})|lower }}"
>
<div class="accordion-body">
<div class="tab-pane-content tab-pane-content-{{ record.data.mediaorient }}">
{% if record.files %}
<div class="tab-pane-content-item tab-pane-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
} %}
</div>
{% endif %}
<div class="tab-pane-content-item tab-pane-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": "Tab / 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,
"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"
}
}
]
}
// Show all accordion header
.frame-type-tab {
@include media-breakpoint-down(lg) {
.tab-content > .tab-pane {
display: block !important;
opacity: 1;
}
}
.accordion:last-child .accordion-header a {
border-bottom: $border-width solid $border-color;
}
}
.accordion-header {
a {
align-items: center;
border-top: $border-width solid $border-color;
color: $primary;
display: flex;
justify-content: space-between;
padding: $input-btn-padding-y-lg 0;
transition: $transition-base;
width: 100%;
&:after {
@extend .svg-arrow-down-12x12;
content: "";
flex-shrink: 0;
margin-left: map-get($margin, 'small');
transition: $transition-base;
}
@include hover-focus {
text-decoration: none;
z-index: 1;
}
&[aria-expanded="true"] {
color: $secondary;
&:after {
transform: scale(-1);
transition: $transition-base;
}
}
}
}
.accordion-body {
padding: $input-btn-padding-y-lg 0;
.frame {
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
}
}
// Tabs
.frame-type-tab {
.nav-tabs {
display: none;
.nav-link {
border: none;
border-bottom: 2px solid transparent;
color: $primary;
margin-right: map-get($margin, 'small');
@include padding(null 0);
transition: $transition-base;
@include hover-focus {
border-bottom-color: $primary;
}
}
.nav-link.active,
.nav-item.show .nav-link {
background: none;
border-bottom-color: $secondary;
color: $secondary;
}
}
@include media-breakpoint-up(xl) {
// Show Tabs
.nav-tabs {
display: flex;
}
// Hide Accordion
.accordion {
border: none;
.accordion-header {
display: none;
}
.collapse {
display: block;
}
}
}
}
No notes defined.