Barmer Fractal

Accordion Stage: With Badge Image 

<div class="o-accordion-stage js-accordion-stage-init cs--a" 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">
                        Default Top
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

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

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--top">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <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">
                        Default Center
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

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

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--center">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <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-3">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-3">
                        Default Bottom
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

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

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--bottom">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <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">
                        No Spacing Top
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

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

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image  badge-image--top">
                        <img src="../../images/teaser--stoerer-2.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <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-5">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-5">
                        Default Hidden SM
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

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

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--hidden-sm">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <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-6">
                <div class="card__content">
                    <div class="card__overline" role="button" tabindex="0" aria-expanded="false" aria-controls="card-default-6">
                        Default Hidden Sm-Md
                    </div>
                    <div class="card__headline">Azubi-Vorteile bei der barmer</div>

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

                    </div>
                </div>

                <div class="card__image">
                    <div class="a-badge-image badge-image--with-spacing badge-image--hidden-sm-md">
                        <img src="../../images/teaser--stoerer-1.png" alt="Dies ist der alt-Text" title="BadgeImage default with spacing" class="a-image " loading="lazy">

                    </div>

                    <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>
    </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": 7,
    "hasBadgeImage": true
  },
  "viewtypes": {
    "specifier": "cs--a"
  },
  "content": {
    "autoplay": false,
    "startAt": 0
  },
  "partials": {
    "items": [
      {
        "switches": {
          "hasBadgeImage": true
        },
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-1",
          "overline": "Default Top"
        },
        "partials": {
          "badgeImage": {
            "viewtypes": {
              "specifier": "badge-image--top"
            }
          }
        }
      },
      {
        "switches": {
          "hasBadgeImage": true
        },
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-2",
          "overline": "Default Center"
        },
        "partials": {
          "badgeImage": {
            "viewtypes": {
              "specifier": "badge-image--center"
            }
          }
        }
      },
      {
        "switches": {
          "hasBadgeImage": true
        },
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-3",
          "overline": "Default Bottom"
        },
        "partials": {
          "badgeImage": {
            "viewtypes": {
              "specifier": "badge-image--bottom"
            }
          }
        }
      },
      {
        "switches": {
          "hasBadgeImage": true
        },
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-4",
          "overline": "No Spacing Top"
        },
        "partials": {
          "badgeImage": {
            "switches": {
              "withSpacing": false
            },
            "viewtypes": {
              "specifier": "badge-image--top"
            },
            "partials": {
              "image": {
                "content": {
                  "sourceUrl": "../../images/teaser--stoerer-2.png"
                }
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasBadgeImage": true
        },
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-5",
          "overline": "Default Hidden SM"
        },
        "partials": {
          "badgeImage": {
            "viewtypes": {
              "specifier": "badge-image--hidden-sm"
            }
          }
        }
      },
      {
        "switches": {
          "hasBadgeImage": true
        },
        "viewtypes": {
          "specifier": ""
        },
        "content": {
          "id": "card-default-6",
          "overline": "Default Hidden Sm-Md"
        },
        "partials": {
          "badgeImage": {
            "viewtypes": {
              "specifier": "badge-image--hidden-sm-md"
            }
          }
        }
      }
    ]
  }
}

No notes defined.