Barmer Fractal

Content Footer 

<div class="o-content-footer">
    <div class="content-footer__info-container">
        <div class="a-plaintext plaintext--webcode">Webcode: a000876</div>

        <div class="m-timestamp "><span class="timestamp__label">Letzte Aktualisierung:</span> <time class="a-datetime ">06.03.2020</time>
        </div>

    </div>
    <div class="content-footer__cta-container">
        <form class="m-user-rating js-user-rating" action="/mock/page-rating-response.json" method="GET" data-success-message="Vielen Dank für Ihr Feedback.">
            <div class="user-rating__stars">
                <h3 class="user-rating__headline">Wie bewerten Sie diesen Artikel?</h3>
                <div class="a-rating-stars" role="group" aria-labelledby="rating-label">
                    <span class="sr-only" id="rating-label">Ihre Bewertung: </span>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="1">
                        <span class="sr-only">Ihre Bewertung: 1 Stern</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="2">
                        <span class="sr-only">Ihre Bewertung: 2 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="3">
                        <span class="sr-only">Ihre Bewertung: 3 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="4">
                        <span class="sr-only">Ihre Bewertung: 4 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="5">
                        <span class="sr-only">Ihre Bewertung: 5 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                </div>

            </div>

            <div class="user-rating__message" hidden>
                <label class="a-label user-rating__label" for="bm-rating-textarea">
                    Haben Sie noch weitere Anmerkungen zu Ihrer Bewertung?

                    <span class="sr-only">Maximale Zeichenzahl: 1000</span>
                </label>

                <div class="user-rating__textarea-wrapper">
                    <textarea class="a-textarea " id="bm-rating-textarea" name="comment" placeholder="Wir freuen uns über Ihre Anregungen..." autocomplete="off" maxlength="1000"></textarea>

                    <div class="a-counter " data-target="#bm-rating-textarea" hidden>
                        <span class="counter__current"></span>
                        /
                        <span class="counter__max"></span>
                    </div>

                </div>
                <input type="hidden" name="webcode" value="a000876">
                <label class="a-label user-rating__name-label" for="ratingname" aria-hidden="true">
                    Name

                </label>

                <input type="text" value="" class="a-input user-rating__name" id="ratingname" name="name" autocomplete="off" tabindex="-1" aria-hidden="true">

                <button class="a-btn btn--secondary js-rating-cancel" type="button">Abbrechen</button>

                <button class="a-btn btn--primary js-rating-submit" type="submit">Abschicken</button>

            </div>
            <div class="user-rating__success-text" hidden>
                <div class="a-richtext ">
                    <p>Vielen Dank für Ihr Feedback.<br><a href="#" class="bm-richtext-link">Link</a></p>
                </div>

            </div>
        </form>

        <div class="m-list list--socialmedia js-socialmedia">

            <ul class="a-list-basic list--social-icon">
                <li class="list__item ">
                    <a class="a-btn btn--print" href="javascript:window.print();" title="Drucken">
                        <i class="a-icon icon--print" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Twitter teilen" target="_blank" data-service="twitter">
                        <i class="a-icon icon--twitter" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Facebook teilen" target="_blank" data-service="facebook">
                        <i class="a-icon icon--facebook" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="whatsapp://send?text&#x3D;Krankenkasse%3A%20Starke%20Leistungen%20und%20Top-Service%20%7C%20BARMER%20https%3A%2F%2Fwww.barmer.de%2F" title="Bei Whatsapp teilen" data-service="whatsapp">
                        <i class="a-icon icon--whatsapp" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei XING teilen" target="_blank" data-service="xing">
                        <i class="a-icon icon--xing" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei LinkedIn teilen" target="_blank" data-service="linkedin">
                        <i class="a-icon icon--linkedin" aria-hidden="true"></i>
                    </a>

                </li>
            </ul>

        </div>

    </div>
</div>
 
<div class="o-content-footer">
  <div class="content-footer__info-container">
    {{ render '@plaintext--webcode' partials.webcode merge=true }}
    {{ render '@timestamp' partials.timestamp merge=true }}
  </div>
  <div class="content-footer__cta-container">
    {{ render '@user-rating' partials.userRating merge=true }}
    {{ render '@list--content-footer-social-media' partials.sociallist merge=true }}
  </div>
</div>
 
{
  "partials": {
    "timestamp": {
      "content": {
        "label": "Letzte Aktualisierung:"
      }
    },
    "sociallist": {
      "viewtypes": {
        "specifier": "list--socialmedia js-socialmedia"
      },
      "partials": {
        "list": {
          "partials": {
            "listitems": [
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "button--print"
              },
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "button--twitter",
                "partials": {
                  "item": {
                    "switches": {
                      "newWindow": true
                    },
                    "content": {
                      "dataService": "twitter",
                      "title": "Bei Twitter teilen"
                    }
                  }
                }
              },
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "button--facebook",
                "partials": {
                  "item": {
                    "switches": {
                      "newWindow": true
                    },
                    "content": {
                      "dataService": "facebook",
                      "title": "Bei Facebook teilen"
                    }
                  }
                }
              },
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "button--whatsapp",
                "partials": {
                  "item": {
                    "content": {
                      "dataService": "whatsapp",
                      "title": "Bei Whatsapp teilen"
                    }
                  }
                }
              },
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "button--xing",
                "partials": {
                  "item": {
                    "switches": {
                      "newWindow": true
                    },
                    "content": {
                      "dataService": "xing",
                      "title": "Bei XING teilen"
                    }
                  }
                }
              },
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "button--linkedin",
                "partials": {
                  "item": {
                    "switches": {
                      "newWindow": true
                    },
                    "content": {
                      "dataService": "linkedin",
                      "title": "Bei LinkedIn teilen"
                    }
                  }
                }
              }
            ]
          }
        }
      }
    },
    "userRating": {
      "content": {
        "webcode": "a000876"
      }
    }
  }
}

No notes defined.