Web Design Guide
2024-10-28 08:44:01 | 2.0.0
<div class="accordion tabs">
<input type="radio" name="tabs" class="tab__selector tab_0" id="tab_0" checked>
<input type="radio" name="tabs" class="tab__selector tab_1" id="tab_1">
<input type="radio" name="tabs" class="tab__selector tab_2" id="tab_2">
<input type="radio" name="tabs" class="tab__selector tab_3" id="tab_3">
<ul class="tabs__tabs tabs_4">
<li class="tab_0"><label for="tab_0" class="tab__title">Technische Infos / Broschüren</label></li>
<li class="tab_1"><label for="tab_1" class="tab__title">Montageanleitungen</label></li>
<li class="tab_2"><label for="tab_2" class="tab__title">Leistungsdiagramme</label></li>
<li class="tab_3"><label for="tab_3" class="tab__title">Zertikate</label></li>
</ul>
<div class="accordion__panel">
<input id="panel_0" type="checkbox" name="panel">
<label class="accordion__label" for="panel_0">Technische Infos / Broschüren</label>
<div class="accordion__content tab_0">
<h4>Accordion heading</h4>
<p>Accordion 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="accordion__panel">
<input id="panel_1" type="checkbox" name="panel">
<label class="accordion__label" for="panel_1">Montageanleitungen</label>
<div class="accordion__content tab_1">
<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="accordion__panel">
<input id="panel_2" type="checkbox" name="panel">
<label class="accordion__label" for="panel_2">Leistungsdiagramme</label>
<div class="accordion__content tab_2">
<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="accordion__panel">
<input id="panel_3" type="checkbox" name="panel">
<label class="accordion__label" for="panel_3">Zertikate</label>
<div class="accordion__content tab_3">
<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="accordion {{#if tabs}}tabs{{/if}}">
{{#if tabs}}
{{#each items}}
<input type="radio" name="tabs" class="tab__selector tab_{{@index}}" id="tab_{{@index}}" {{#if @first}}checked{{/if}}>
{{/each}}
<ul class="tabs__tabs tabs_4">
{{#each items}}
<li class="tab_{{@index}}"><label for="tab_{{@index}}" class="tab__title">{{{title}}}</label></li>
{{/each}}
</ul>
{{/if}}
{{#each items}}
<div class="accordion__panel">
<input id="panel_{{@index}}" type="checkbox" name="panel">
<label class="accordion__label" for="panel_{{@index}}">{{{title}}}</label>
<div class="accordion__content tab_{{@index}}">
{{#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>
{
"tabs": true,
"items": [
{
"title": "Technische Infos / Broschüren",
"classes": "is-active",
"heading": "Accordion heading",
"text": "Accordion 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",
"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",
"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",
"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:
$allowed-tabs-sizes: 2, 3, 4, 6; .accordion { $root: &; $icon-width: 4.4rem; margin: 0; padding: 0; &__panel { //stylelint-disable-next-line selector-no-qualifying-type > input[type='checkbox'] { display: none; } } &__label { @include typography-level('accordion'); position: relative; display: block; overflow: hidden; color: $black; text-overflow: ellipsis; transition: background-color 0.15s; cursor: pointer; @each $breakpoint, $gutter in $grid-gutters { @include breakpoint($breakpoint) { $gutter: rem-calc($gutter); padding: 1.2rem $gutter + $icon-width 1.2rem $gutter; } } &:hover { background-color: var(--accordion-label-hover-color, #{$gray-lighter}); color: $black; &::before { background-color: $black; color: $white; } } input:checked ~ & { background-color: $black; color: $white; } &::before { // $symbol: map-get($icons, 'chevron-down'); // @include icon-content-extended($symbol); content: '+'; position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: $icon-width; height: 100%; padding-bottom: 0.5rem; font-size: 3rem; transition: background-color 0.15s; } input:checked ~ &::before { // $symbol-checked: map-get($icons, 'chevron-up'); // @include icon-content-extended($symbol-checked); content: '\2013'; background-color: $secondary; color: $white; } } &__content { background-color: var(--accordion-content-bg-color, #{$gray-lighter}); color: $black; @each $breakpoint, $gutter in $grid-gutters { @include breakpoint($breakpoint) { $gutter: rem-calc($gutter); padding: $gutter; } } input:not(:checked) ~ & { display: none; } } @at-root .-desktop &.-mobile { #{$root}__label { display: none; } #{$root}__content { background-color: inherit; } input:not(:checked) ~ #{$root}__content { display: block; } } &.-mobile { @include breakpoint(pre-medium) { #{$root}__label { display: none; } #{$root}__content { background-color: inherit; } input:not(:checked) ~ #{$root}__content { display: block; } } } &.tabs { @include breakpoint(medium) { #{$root}__label { display: none; } @for $i from 0 to 6 { .tab_#{$i}.tab__selector:checked ~ .accordion__panel .accordion__content.tab_#{$i} { display: block; border: 1px solid $gray-lighter; } .tab_#{$i}.tab__selector:checked ~ .tabs__tabs:not(.tabs__teasers) .tab_#{$i} { background-color: $black; color: $white; } .tab_#{$i}.tab__selector:checked ~ .tabs__tabs .tab_#{$i} { opacity: 1; .teaser__visual { background-color: $white; } } } .tabs__tabs { display: flex; flex-flow: row; margin: 0; padding: 0; list-style: none; li { flex-grow: 1; margin: 0 0.5rem; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } } @each $size in $allowed-tabs-sizes { &.tabs_#{$size} li { width: (100% / $size); } } label { display: block; width: 100%; height: 100%; padding: 1rem 0; border: 1px solid $gray-lighter; border-bottom: 0; text-align: center; .teaser__content { text-align: left; } } &.tabs__teasers { li { opacity: 0.4; } label { padding-top: 0; padding-bottom: 0; .teaser--simple .teaser__content { padding-bottom: 1rem; padding-left: 0.8rem; } } } } .accordion__panel { --accordion-content-bg-color: $white; } } .tabs__tabs { @include breakpoint(pre-medium down) { display: none; } } .tab__selector { display: none; } } } - URL: /components/raw/molecules-accordion/_accordion.scss
- Filesystem Path: src/components/02-ui-components/02-molecules/12-accordion/_accordion.scss
- Size: 4.5 KB
- Handle: @molecules-accordion--tabs
- Variants (2): Default , Tabs
- Preview:
- Filesystem Path: src/components/02-ui-components/02-molecules/12-accordion/accordion.hbs
- References (1): @molecules-download
There are no notes for this item.