Barmer Fractal

Accordion Stage: Default 

<div class="o-accordion-stage js-accordion-stage-init " data-autoplay="false" data-start-at="0">
    <ul class="accordion-stage__list">
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-1">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-1">
                        Mitglied werden
                    </div>
                    <div class="card__headline">Zur Barmer wechseln - Ohne Aufwand, einfach und schnell</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--conversion" href="" title="">
                            Jetzt entdecken
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-2">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-2">
                        Vorteile für Azubis
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--primary" href="" title="">
                            Mehr erfahren
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
                        <img src="../../images/4x3/mann-mit-tablet.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-3">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-3">
                        Vorteile für Studenten
                    </div>
                    <div class="card__headline">Studentische Krankenversicherung: Jetzt Studi-Vorteile der Barmer sichern</div>

                </div>

                <div class="card__image">
                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
                        <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
        <li class="accordion-stage__item">
            <div class="o-card " id="card-default-4">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-4">
                        Barmer empfehlen
                    </div>
                    <div class="card__headline">Sie sind zufrieden mit uns? Dann empfehlen Sie uns gerne weiter</div>

                    <div class="card__cta-wrapper">
                        <a class="a-btn btn--secondary" href="" title="">
                            Mehr erfahren
                        </a>

                    </div>
                </div>

                <div class="card__image">
                    <picture class="a-picture ">
                        <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
                        <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
                        <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
                        <img src="../../images/4x3/mann-mit-tablet.jpg" alt="" loading="lazy">
                    </picture>

                </div>
            </div>

        </li>
    </ul>
    <div class="accordion-stage__image-wrapper">

    </div>
</div>
 
<div class="o-accordion-stage js-accordion-stage-init {{viewtypes.specifier}}"
     data-autoplay="{{content.autoplay}}"
     data-start-at="{{content.startAt}}">
  <ul class="accordion-stage__list">
    {{#each partials.items as |item|}}
      {{#ifcond @index '<' ../switches.itemsCount}}
        <li class="accordion-stage__item">
            {{ render '@card' item merge=true }}
        </li>
      {{/ifcond}}
    {{/each}}
  </ul>
  <div class="accordion-stage__image-wrapper">

  </div>
</div>
 
{
  "switches": {
    "itemsCount": 5
  },
  "viewtypes": {
    "specifier": ""
  },
  "content": {
    "autoplay": false,
    "startAt": 0
  },
  "partials": {
    "items": [
      {
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-1",
          "overline": "Mitglied werden",
          "headline": "Zur Barmer wechseln - Ohne Aufwand, einfach und schnell"
        }
      },
      {
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-2",
          "overline": "Vorteile für Azubis",
          "headline": "Azubi-Vorteile bei der barmer"
        },
        "partials": {
          "button": {
            "switches": {
              "asLink": true
            },
            "viewtypes": {
              "specifier": "btn--primary"
            },
            "content": {
              "label": "Mehr erfahren"
            }
          },
          "picture": {
            "content": {
              "sources": [
                {
                  "media": "(max-width: 800px)",
                  "srcset": "../../images/16x9/mann-mit-tablet.jpg"
                },
                {
                  "media": "(min-width: 801px) and (max-width:1024px)",
                  "srcset": "../../images/1x1/mann-mit-tablet.jpg"
                },
                {
                  "media": "(min-width: 1025px)",
                  "srcset": "../../images/4x3/mann-mit-tablet.jpg"
                }
              ],
              "img": {
                "src": "../../images/4x3/mann-mit-tablet.jpg",
                "alt": ""
              }
            }
          }
        }
      },
      {
        "viewtypes": {
          "specifier": ""
        },
        "switches": {
          "hasCTA": false
        },
        "content": {
          "id": "card-default-3",
          "overline": "Vorteile für Studenten",
          "headline": "Studentische Krankenversicherung: Jetzt Studi-Vorteile der Barmer sichern"
        }
      },
      {
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-4",
          "overline": "Barmer empfehlen",
          "headline": "Sie sind zufrieden mit uns? Dann empfehlen Sie uns gerne weiter"
        },
        "partials": {
          "button": {
            "switches": {
              "asLink": true
            },
            "viewtypes": {
              "specifier": "btn--secondary"
            },
            "content": {
              "label": "Mehr erfahren"
            }
          },
          "picture": {
            "content": {
              "sources": [
                {
                  "media": "(max-width: 800px)",
                  "srcset": "../../images/16x9/mann-mit-tablet.jpg"
                },
                {
                  "media": "(min-width: 801px) and (max-width:1024px)",
                  "srcset": "../../images/1x1/mann-mit-tablet.jpg"
                },
                {
                  "media": "(min-width: 1025px)",
                  "srcset": "../../images/4x3/mann-mit-tablet.jpg"
                }
              ],
              "img": {
                "src": "../../images/4x3/mann-mit-tablet.jpg",
                "alt": ""
              }
            }
          }
        }
      }
    ]
  }
}

No notes defined.