Disabled hide and show
Quicklinks @quicklinks
Default @quicklinks
<!-- Default -->
<div class="quicklinks js-quicklinks" id="quicklinks-add5">
<div class="quicklinks__inner">
<div class="quicklinks__message" id="quicklinks-add5-message" role="alert">
<p>Hier findest du unsere weiteren Kontaktmöglichkeiten</p>
</div><button class="quicklinks__button quicklinks__button--show" type="button" aria-describedby="quicklinks-add5-message"><svg class="icon icon--contact quicklinks__button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-contact"></use>
</svg><span class="quicklinks__button-text">Kontaktfenster öffnen</span></button>
<div class="quicklinks__container quicklinks__container--hidden">
<div class="quicklinks__container-inner">
<div class="quicklinks__container-head"><button class="quicklinks__button quicklinks__button--help" type="button"><svg class="icon icon--help quicklinks__button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-help"></use>
</svg><span class="quicklinks__button-text">Hilfe anfordern</span></button>
<h3 class="quicklinks__headline">Kontakt</h3><button class="quicklinks__button quicklinks__button--close" type="button"><svg class="icon icon--cross quicklinks__button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-cross"></use>
</svg><span class="quicklinks__button-text">Kontaktfenster schließen</span></button>
</div>
<ul class="quicklinks__items">
<li class="quicklinks__item quicklinks__item--color-darkblue" id="quicklinks-add5-slot0">
<div class="quicklinks__link"><button class="quicklinks__link-head" data-action="chatbot-open"><span class="quicklinks__link-icon"><svg class="icon icon--bubble quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-bubble"></use>
</svg></span><span class="quicklinks__link-title">Chatbot</span></button><span class="quicklinks__link-tail"><svg class="icon icon--arrow quicklinks__link-icon.quicklinks__link-icon--arrow" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-arrow"></use>
</svg></span></div>
</li>
<li class="quicklinks__item quicklinks__item--text quicklinks__item--color-red" id="quicklinks-add5-slot1">
<div class="quicklinks__link"><button class="quicklinks__link-head" aria-controls="quicklinks-add5-slot1"><span class="quicklinks__link-icon"><svg class="icon icon--phone quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-phone"></use>
</svg></span><span class="quicklinks__link-title">Telefon</span></button><a class="quicklinks__link-text" href="tel:0123456789"><span class="f-w-bold">07720 9727-0</span> <span class="f-small">Mo – Fr, 08:00 – 18:00</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--color-green" id="quicklinks-add5-slot2">
<div class="quicklinks__link"><a class="quicklinks__link-head" href="#"><span class="quicklinks__link-icon"><svg class="icon icon--headphones quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-headphones"></use>
</svg></span><span class="quicklinks__link-title">Beratung</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--color-green" id="quicklinks-add5-slot3">
<div class="quicklinks__link"><a class="quicklinks__link-head" href="#"><span class="quicklinks__link-icon"><svg class="icon icon--arrow quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-arrow"></use>
</svg></span><span class="quicklinks__link-title">Test</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--text quicklinks__item--color-lightblue" id="quicklinks-add5-slot4">
<div class="quicklinks__link"><button class="quicklinks__link-head" aria-controls="quicklinks-add5-slot4"><span class="quicklinks__link-icon"><svg class="icon icon--mail quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-mail"></use>
</svg></span><span class="quicklinks__link-title">E-Mail</span></button><a class="quicklinks__link-text" href="mailto:info@vividabkk.de"><span class="f-w-bold">info@vividabkk.de</span> <span class="f-small">Jederzeit erreichbar</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--text quicklinks__item--color-lightblue" id="quicklinks-add5-slot5">
<div class="quicklinks__link"><button class="quicklinks__link-head" aria-controls="quicklinks-add5-slot5"><span class="quicklinks__link-icon"><svg class="icon icon--mail quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-mail"></use>
</svg></span><span class="quicklinks__link-title">Post</span></button>
<div class="quicklinks__link-text"><span class="f-w-bold">Zentrale Postanschrift</span> <span>vivida bkk</span> <span>78044 Villingen-Schwenningen</span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{
"headline": {
"level": 3,
"text": "Kontakt"
},
"showButton": {
"text": "Kontaktfenster öffnen",
"icon": "contact"
},
"closeButton": {
"text": "Kontaktfenster schließen",
"icon": "cross"
},
"helpButton": {
"text": "Hilfe anfordern",
"icon": "help"
},
"message": "p Hier findest du unsere weiteren Kontaktmöglichkeiten\n",
"items": [
{
"icon": "bubble",
"title": "Chatbot",
"color": "darkblue",
"action": "chatbot-open"
},
{
"link": "tel:0123456789",
"icon": "phone",
"title": "Telefon",
"text": "#[span.f-w-bold 07720 9727-0] #[span.f-small Mo – Fr, 08:00 – 18:00]\n",
"color": "red"
},
{
"icon": "headphones",
"title": "Beratung",
"color": "green",
"link": "#"
},
{
"icon": "arrow",
"title": "Test",
"color": "green",
"link": "#"
},
{
"icon": "mail",
"title": "E-Mail",
"link": "mailto:info@vividabkk.de",
"text": "#[span.f-w-bold info@vividabkk.de] #[span.f-small Jederzeit erreichbar]\n",
"color": "lightblue"
},
{
"icon": "mail",
"title": "Post",
"text": "#[span.f-w-bold Zentrale Postanschrift] #[span vivida bkk] #[span 78044 Villingen-Schwenningen]\n",
"color": "lightblue"
}
]
}
Always On @quicklinks--always-on
<!-- Always On -->
<div class="quicklinks js-quicklinks" id="quicklinks-c0f7" data-show-always="data-show-always">
<div class="quicklinks__inner">
<div class="quicklinks__message" id="quicklinks-c0f7-message" role="alert">
<p>Hier findest du unsere weiteren Kontaktmöglichkeiten</p>
</div><button class="quicklinks__button quicklinks__button--show" type="button" aria-describedby="quicklinks-c0f7-message"><svg class="icon icon--contact quicklinks__button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-contact"></use>
</svg><span class="quicklinks__button-text">Kontaktfenster öffnen</span></button>
<div class="quicklinks__container quicklinks__container--hidden">
<div class="quicklinks__container-inner">
<div class="quicklinks__container-head"><button class="quicklinks__button quicklinks__button--help" type="button"><svg class="icon icon--help quicklinks__button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-help"></use>
</svg><span class="quicklinks__button-text">Hilfe anfordern</span></button>
<h3 class="quicklinks__headline">Kontakt</h3><button class="quicklinks__button quicklinks__button--close" type="button"><svg class="icon icon--cross quicklinks__button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-cross"></use>
</svg><span class="quicklinks__button-text">Kontaktfenster schließen</span></button>
</div>
<ul class="quicklinks__items">
<li class="quicklinks__item quicklinks__item--color-darkblue" id="quicklinks-c0f7-slot0">
<div class="quicklinks__link"><button class="quicklinks__link-head" data-action="chatbot-open"><span class="quicklinks__link-icon"><svg class="icon icon--bubble quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-bubble"></use>
</svg></span><span class="quicklinks__link-title">Chatbot</span></button><span class="quicklinks__link-tail"><svg class="icon icon--arrow quicklinks__link-icon.quicklinks__link-icon--arrow" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-arrow"></use>
</svg></span></div>
</li>
<li class="quicklinks__item quicklinks__item--text quicklinks__item--color-red" id="quicklinks-c0f7-slot1">
<div class="quicklinks__link"><button class="quicklinks__link-head" aria-controls="quicklinks-c0f7-slot1"><span class="quicklinks__link-icon"><svg class="icon icon--phone quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-phone"></use>
</svg></span><span class="quicklinks__link-title">Telefon</span></button><a class="quicklinks__link-text" href="tel:0123456789"><span class="f-w-bold">07720 9727-0</span> <span class="f-small">Mo – Fr, 08:00 – 18:00</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--color-green" id="quicklinks-c0f7-slot2">
<div class="quicklinks__link"><a class="quicklinks__link-head" href="#"><span class="quicklinks__link-icon"><svg class="icon icon--headphones quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-headphones"></use>
</svg></span><span class="quicklinks__link-title">Beratung</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--color-green" id="quicklinks-c0f7-slot3">
<div class="quicklinks__link"><a class="quicklinks__link-head" href="#"><span class="quicklinks__link-icon"><svg class="icon icon--arrow quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-arrow"></use>
</svg></span><span class="quicklinks__link-title">Test</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--text quicklinks__item--color-lightblue" id="quicklinks-c0f7-slot4">
<div class="quicklinks__link"><button class="quicklinks__link-head" aria-controls="quicklinks-c0f7-slot4"><span class="quicklinks__link-icon"><svg class="icon icon--mail quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-mail"></use>
</svg></span><span class="quicklinks__link-title">E-Mail</span></button><a class="quicklinks__link-text" href="mailto:info@vividabkk.de"><span class="f-w-bold">info@vividabkk.de</span> <span class="f-small">Jederzeit erreichbar</span></a></div>
</li>
<li class="quicklinks__item quicklinks__item--text quicklinks__item--color-lightblue" id="quicklinks-c0f7-slot5">
<div class="quicklinks__link"><button class="quicklinks__link-head" aria-controls="quicklinks-c0f7-slot5"><span class="quicklinks__link-icon"><svg class="icon icon--mail quicklinks__link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="#icon-mail"></use>
</svg></span><span class="quicklinks__link-title">Post</span></button>
<div class="quicklinks__link-text"><span class="f-w-bold">Zentrale Postanschrift</span> <span>vivida bkk</span> <span>78044 Villingen-Schwenningen</span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{
"headline": {
"level": 3,
"text": "Kontakt"
},
"showButton": {
"text": "Kontaktfenster öffnen",
"icon": "contact"
},
"closeButton": {
"text": "Kontaktfenster schließen",
"icon": "cross"
},
"helpButton": {
"text": "Hilfe anfordern",
"icon": "help"
},
"message": "p Hier findest du unsere weiteren Kontaktmöglichkeiten\n",
"items": [
{
"icon": "bubble",
"title": "Chatbot",
"color": "darkblue",
"action": "chatbot-open"
},
{
"link": "tel:0123456789",
"icon": "phone",
"title": "Telefon",
"text": "#[span.f-w-bold 07720 9727-0] #[span.f-small Mo – Fr, 08:00 – 18:00]\n",
"color": "red"
},
{
"icon": "headphones",
"title": "Beratung",
"color": "green",
"link": "#"
},
{
"icon": "arrow",
"title": "Test",
"color": "green",
"link": "#"
},
{
"icon": "mail",
"title": "E-Mail",
"link": "mailto:info@vividabkk.de",
"text": "#[span.f-w-bold info@vividabkk.de] #[span.f-small Jederzeit erreichbar]\n",
"color": "lightblue"
},
{
"icon": "mail",
"title": "Post",
"text": "#[span.f-w-bold Zentrale Postanschrift] #[span vivida bkk] #[span 78044 Villingen-Schwenningen]\n",
"color": "lightblue"
}
],
"showAlways": true
}