Web Design Guide
2024-10-28 08:44:01 | 2.0.0
<div class="tabs_new">
<ul class="tabs_new__tabs">
<li class="tab tab_0 -active"><label for="tab_0" class="tab__title">Technische Infos / Broschüren</label></li>
<li class="tab tab_1 "><label for="tab_1" class="tab__title">Montageanleitungen</label></li>
<li class="tab tab_2 "><label for="tab_2" class="tab__title">Leistungsdiagramme</label></li>
<li class="tab tab_3 "><label for="tab_3" class="tab__title">Leistungsdiagramme</label></li>
<li class="tab tab_4 "><label for="tab_4" class="tab__title">Leistungsdiagramme</label></li>
<li class="tab tab_5 "><label for="tab_5" class="tab__title">Leistungsdiagramme</label></li>
<li class="tab tab_6 "><label for="tab_6" class="tab__title">Leistungsdiagramme</label></li>
<li class="tab tab_7 "><label for="tab_7" class="tab__title">Zertikate</label></li>
</ul>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_0" id="tab_0" checked>
<div class="tabs_new__content">
<h4>Technische Infos / Broschüren</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_1" id="tab_1">
<div class="tabs_new__content">
<h4>Montageanleitungen</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_2" id="tab_2">
<div class="tabs_new__content">
<h4>Leistungsdiagramme</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_3" id="tab_3">
<div class="tabs_new__content">
<h4>Leistungsdiagramme</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_4" id="tab_4">
<div class="tabs_new__content">
<h4>Leistungsdiagramme</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_5" id="tab_5">
<div class="tabs_new__content">
<h4>Leistungsdiagramme</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_6" id="tab_6">
<div class="tabs_new__content">
<h4>Leistungsdiagramme</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_7" id="tab_7">
<div class="tabs_new__content">
<h4>Zertikate</h4>
<p>Some text</p>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
<div class="small-12 medium-4 cell"><a class="link__download" href="#">
<div class=" download ">
<div class="download__content">
<span class="download__date ">10.01.12</span>
<span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
<div class="download__text">
<p>Here you get newest information about best drinks ever!</p>
</div>
</div>
<div class="download__cta">
<div class="download__mime">
<div class=" media ">
<img class="media__item" src="/images/mime/download_pdf.svg" alt=>
</div>
</div>
<p class="download__info">
<span class="download__link link">DOWNLOAD</span>
<br>(PDF, 137 KB)
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="tabs_new">
<ul class="tabs_new__tabs">
{{#each items}}
<li class="tab tab_{{@index}} {{classes}}"><label for="tab_{{@index}}" class="tab__title">{{{title}}}</label></li>
{{/each}}
</ul>
{{#each items}}
<div class="tabs_new__panel">
<input type="radio" name="tabs" class="tab__selector tab_{{@index}}" id="tab_{{@index}}" {{#if @first}}checked{{/if}}>
<div class="tabs_new__content">
{{#heading}}
<h4>{{{.}}}</h4>
{{/heading}}
{{#text}}
<p>{{{.}}}</p>
{{/text}}
{{#downloads}}
<div class="grid-x grid-margin-x grid-margin-y">
{{#downloadItems}}
<div class="small-12 medium-4 cell">{{render '@molecules-download'}}</div>
{{/downloadItems}}
</div>
{{/downloads}}
</div>
</div>
{{/each}}
</div>
{
"name": "tabs",
"items": [
{
"title": "Technische Infos / Broschüren",
"classes": "-active",
"heading": "Technische Infos / Broschüren",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
},
{
"title": "Montageanleitungen",
"heading": "Montageanleitungen",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
},
{
"title": "Leistungsdiagramme",
"heading": "Leistungsdiagramme",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
},
{
"title": "Leistungsdiagramme",
"heading": "Leistungsdiagramme",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
},
{
"title": "Leistungsdiagramme",
"heading": "Leistungsdiagramme",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
},
{
"title": "Leistungsdiagramme",
"heading": "Leistungsdiagramme",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
},
{
"title": "Leistungsdiagramme",
"heading": "Leistungsdiagramme",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
},
{
"title": "Zertikate",
"heading": "Zertikate",
"text": "Some text",
"downloads": {
"downloadItems": [
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
},
{
"date": "12.10.2017",
"headline": "RAUTHERM SPEED",
"text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
"download": "DOWNLOAD",
"pdf": "(PDF, 137 KB)",
"small": "../../images/mime/download_pdf.svg"
}
]
}
}
]
}
-
Content:
.tabs_new { $root: &; .tab__selector { display: none; } &__tabs { display: flex; flex-flow: row; flex-wrap: wrap; column-gap: 1rem; width: 100%; margin: -1px; margin-bottom: 1rem; padding: 0; list-style: none; row-gap: 1rem; @include breakpoint(medium down) { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; // stylelint-disable-next-line property-no-unknown scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .tab { display: block; flex-shrink: 1; border: 1px solid $gray-lighter; text-align: center; white-space: nowrap; scroll-snap-align: center; &.-active { background-color: $black; color: $white; } &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } label { display: block; padding: 1rem; } } } &__panel { display: none; border: 1px solid $gray-lighter; &:has(.tab__selector:checked) { display: block; } } @each $breakpoint, $gutter in $grid-gutters { @include breakpoint($breakpoint) { &__content { padding: rem-calc($gutter); } .container .container & { $gutter: rem-calc($gutter); margin: -$gutter / 2; } } } } - URL: /components/raw/molecules-tab/_tab.scss
- Filesystem Path: src/components/02-ui-components/02-molecules/28-tab/_tab.scss
- Size: 1.4 KB
- Handle: @molecules-tab
- Preview:
- Filesystem Path: src/components/02-ui-components/02-molecules/28-tab/tab.hbs
- References (1): @molecules-download
There are no notes for this item.